-1

我正在构建一个 chrome 扩展，可以将网页图像的 rgb 读取到单独的数组中。但是，每个数组的中间都有一些零（尽管前几个像素的 rgb 读数是正确的）。 可疑的 0。我所有的图像大小都是（w：199；H：252），我刚刚发现图像数据中正常显示了 198 个 RGB，但随后是 252 个 0。感觉就像我做对了 onload 的事情。谁能帮我找出问题所在？

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

1 回答 1

0

错字：您在调用 getImageData 时反转了宽度和高度：

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

应该

var imageData = ctx.getImageData(0, 0, c.width, c.height);
于 2020-08-30T09:58:49.670 回答