画布获取图像数据始终返回0 [英] Canvas Get Image Data returning 0 always
本文介绍了画布获取图像数据始终返回0的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试反转图像的颜色.现在,图像加载正常,但是当我尝试调用getImageData并将putImageData返回到画布上时.画布只是空白.然后我打印了所有的imageData,由于某种原因它看起来总是为0.我对此感到严重困扰.请帮助并提前告知!
I am trying to invert the color of an image. Now the image loads ok, but when I try to call getImageData and putImageData back onto the canvas. The canvas is simply blank. Then I printed out all imageData, it appears like that it is always 0 for some reason. I am seriously troubled by this. Please help and thx in advance!
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
}
var imgData = ctx.getImageData(10,10,50,50);
console.log(imgData.data.toString()); //return 0's
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
}
推荐答案
您需要等待图像加载
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
//================================================================
// this event will only get called after you have returned from this function
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
}
//================================================================
// The image has not loaded at this point
// the following code will always be working on an empty canvas
var imgData = ctx.getImageData(10,10,50,50);
console.log(imgData.data.toString()); //return 0's
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
//================================================================
// onload will fire after this point
}
要修复
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = "hand.jpg";
img.onload = function() {
ctx.drawImage(img, 10, 10,50,50);
var imgData = ctx.getImageData(10,10,50,50);
for (var i=0;i<imgData.data.length;i+=4){
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,100,100);
}
}
顺便说一句,您可以使用
BTW you can invert the image colours with
ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "white"
ctx.fillRect(0,0,ctx.canvas.width,ctx.canvas.height);
ctx.globalCompositeOperation = "source-over"; // restore default
这篇关于画布获取图像数据始终返回0的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文