image - 在 Canvas html5上导入图像

Question

var img = new Image();
img.src = '/images/backdrop.jpg';
ctx.drawImage(img,0,0);

我想使用对话框机制将图像从本地磁盘加载到 Canvas 上，而不是像上例中那样直接指定路径。我尝试使用 JavaScript 进行不同的排序但徒劳无功，甚至尝试使用输入类型作为文件。我还能尝试什么？

Answer 1

看这里:

• https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/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 文件夹中。

希望这对您有所帮助。