Javascript GetImageData不知从何处返回一些随机零

我正在构建一个chrome扩展，可以将网页图像的rgb读取到单独的阵列中。但是，在每个阵列的中间没有任何零点（虽然前几个像素的RGB读数是正确的）。 . 我所有图像的大小都是（w:199；H:252），我刚刚发现imagedata中正常显示的是198个RGB，但随后是2520。 我觉得我做得很好。有人能帮我解决这个问题吗

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;
}

函数readImage（图像）{
var img=新图像（）；
img.onload=函数（）{
var c=document.createElement（'canvas'）；
c、 高度=图像的自然高度；
c、 宽度=image.naturalWidth；
var ctx=c.getContext（'2d'）；
ctx.drawImage（img，0,0）；
控制台。原木（“高度：+c.高度+”重量：+c.宽度）；
var imageData=ctx.getImageData（0，0，c.高度，c.宽度）；
var pix=imageData.data；
对于（变量i=0，n=pix.length；i

输入错误：调用getImageData时，宽度和高度颠倒了：

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

应该是

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