在画布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文件夹中包含该文件.

希望这可以帮助.