GetImageData不知从哪里返回一些随机零

Question

我正在构建一个chrome扩展，它可以将网页图像的rgb读取到单独的数组中。然而，在每个数组的中间有一些零(尽管前几个像素的rgb读数是正确的(。可疑的0s。我所有的图像大小都是(w:199；H:252(，我刚刚发现图像数据中有198个RGB正常显示，但后面是2520s。感觉我把加载的事情做对了。有人能帮我解决这个问题吗？

function readImage(image) {
var img = new Image();
img.onload = function () {
var c = document.createElement('canvas');
c.height = image.naturalHeight;
c.width = image.naturalWidth;
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0);
console.log("height : " + c.height + "weight: " + c.width);
var imageData = ctx.getImageData(0, 0, c.height, c.width);
var pix = imageData.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
var alpha = pix[i + 3];
pix[i + 3] = pix[i + 2];
pix[i + 2] = pix[i + 1];
pix[i + 1] = pix[i];
pix[i] = alpha;
}      
console.log("imgaeData = " +pix);
console.log("raw buffer length= " + pix.length);       
}
img.src = image.src;
}

Answer 1

类型：在对getImageData:的调用中，宽度和高度颠倒

var imageData = ctx.getImageData(0, 0, c.height, c.width);

应该是

var imageData = ctx.getImageData(0, 0, c.width, c.height);