I'm currently developing a Chrome extension that has the capability to extract RGB values of images on web pages and store them into separate arrays. However, I'm encountering an issue where there are unexpected zeros appearing in the middle of each RGB array, despite the correct readings for the first few pixels. It's like a pattern of zeros that I can't explain. You can see the issue in this image: Suspicious 0s. I've noticed that all my image sizes are consistent at (w:199; H:252), but when looking at the RGB data, there are only 198 values displayed normally in the imagedata array, followed by 252 zeros. I feel like I've correctly implemented the onload function, but I can't seem to pinpoint the source of the problem. Could anyone provide some insights or suggestions to help me troubleshoot this?
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;
}