在画布html5上导入图像

Posted 2023-03-05

【中文标题】在画布html5上导入图像

【英文标题】：importing image on canvas html5

【发布时间】：2011-04-21 13:28:49

【问题描述】：

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

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

【参考方案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 文件夹中。

希望这会有所帮助。