在画布html5上导入图像

var img = new Image();
img.src =’/ images / backdrop.jpg’;
ctx.drawImage(IMG,0);
我想使用对话框机制将图像从本地磁盘加载到画布上,而不是像上面那样直接指定的路径.我尝试使用javascript进行不同的排序但是徒劳无功,甚至尝试使用输入类型作为文件.我还能尝试什么？

解决方法

看看这里：

> https://developer.mozilla.org/docs/Web/Guide/HTML/Canvas_tutorial/Using_images

在加载图像后进行drawImage调用很重要：

var img = new Image();
img.onload = function() {
    var ctx = document.getElementById('ctx').getContext('2d');
    ctx.drawImage(img,0);
}
img.src = 'images/backdrop.jpg';

另外,请注意你可能想使用images / backdrop.jpg而不是/images/backdrop.jpg(注意前面没有斜线),因为使用后者会从根目录获取图像,我会认为可能不在哪里你的形象是.

至于从对话框加载,您可以用以下内容替换上面的最后一行：

var name = prompt("Enter the name of the file","backdrop.jpg");
img.src = 'images/' + name;

这样,用户就可以输入图像文件的名称来加载它.当然,您需要在images文件夹中包含该文件.

希望这可以帮助.