html5 画布导入本地图片,在画布html5上导入图像

看看这里：

在加载图像后进行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文件夹中包含该文件.

希望这可以帮助.