Question

HTML5中canvas图片加载的问题

用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中则会报错。

• 你的回答被采纳后将获得：
• 系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏20（财富值+成长值）

Answer 1

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