在画布html5上导入图像

Question

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

Answer 1

看看这里：

• 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, 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文件夹中包含该文件。

希望这有帮助。