pixelgetimagedataputimagedata

imageData print wrong value

I need to manipulate pixels in an image and save integer values (0-255) in RGBA values.

let imageData = this.context.getImageData(0, 0, this.width, this.height);
imageData.data[1448] = 10;
imageData.data[1449] = 20;
imageData.data[1450] = 30;
imageData.data[1451] = 40;
this.context.putImageData(imageData, 0, 0);

After get ImageData again and print values in their respective indexes, this is the result:

IDX 1448: 13

IDX 1449: 19,

IDX 1450: 32

IDX 1451: 40

Because the value assigned is not the same as the rescued value???

Thanks!

Solution

  • When you change the alpha of an RGBA pixel, the browser will update the values of the other colors (RGB). For example, if used alpha = 0, the RGB values also be 0.

    To resolve this problem, assign the value of 255 to alpha, so it does not impact the other values.