HTML5中canvas图片加载的问题

Posted 2023-04-26

用drawImage()方法的时候，我把它放在onload事件后面，确保了可以顺利绘制图片。
但在绘制之后还想用getImageData() 方法修改图片，就不行了。这时候如果把getImageData() 方法的相关操作放在onload事件后面，则会报错。

代码的话，下面是一个翻转图片一部分像素的代码。试了最新的IE是可以，chrome就不行了

ctx.drawImage(Img1,0,0);
var Img2 = ctx.getImageData(0,0,200,300);
for(var i=0; i<Img.data.length; i+=4)

Img2.data[i] = 225 - Img2.data[i];
Img2.data[i+1] = 225 - Img2.data[i+1];
Img2.data[i+2] = 225 - Img2.data[i+2];
Img2.data[i+3] = 225;

ctx.putImageData(Img2,0,0)
getImageData() 方法的相关操作放在onload事件后面，在IE中正常，在chrome中则会报错。

参考技术A getImageData方法不支持file协议，确定本地启了服务。另外最好把控制台的错误代码贴出来，这样方便大家找bug。

为啥HTML5canvas中drawImage()第一次加载只出现最后一个图，刷新就出现问题？

参考技术A 必须等到图片完全加载后才能对其进行操作， 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas 上，将不会显示任何图片. \\x0d\\x0a\\x0d\\x0a var img= new Image(); \\x0d\\x0a img.src = "bark.jpg"; \\x0d\\x0a \\x0d\\x0a // 图片加载完后，将其显示在canvas 上 \\x0d\\x0a img.onload = function () \\x0d\\x0a drawCanvas(); \\x0d\\x0a