javascript - 在 chrome 中将图像从 localhost 绘制到画布上

Question

我正在从本地主机中的文件夹访问图像。

图像在 img 标签中正确加载。但是，当我尝试将该图像绘制到画布上时，它并没有出现！

我已经实现了它，当图像被放到画布上时，它被绘制到它上面，我通过从原始源获取图像来绘制它。当我一次又一次地拖动时，经过一些尝试，它就会出现。

该功能在 Firefox 和 IE 中运行良好

这是我在 localhost 上的图像的来源：

b.src = "http://localhost/casema...E/2780Chrysanthemum.jpg"

ctx1.drawImage(b, x2-15*z, y2-15*z, w1, h1 );

Answer 1

在 HTML5 中，不能确定图像总是会立即加载，因此您需要确保在绘制之前图像已完全加载。此代码可以帮助您：

var myImage = new Image();
myImage.src = "path/to/your/image";
myImage.onload = function(){
      //context is the canvas context 
      context.drawImage(myImage,x,y,weight,height);
}

Answer 2

您是否在计算机上使用本地 HTML 文件？如果是这样，您需要添加参数

--allow-file-access-from-files

调用 Chrome 时。