I found that getImageData
of an HTML canvas seems to return incorrect byte values.
I generated a 1x1 px image with the following Python code:
from PIL import Image
import numpy as np
a = np.array([[[12, 187, 146, 62]]], dtype=np.uint8)
Image.fromarray(a).save('image.png')
I converted the image to base64 to include it in this code snippet:
let image = document.createElement('img');
image.addEventListener('load', () => {
let canvas = document.createElement('canvas');
let ctx = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
document.body.innerHTML = data;
});
image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGPg2T3JDgADyAGYmiSbAQAAAABJRU5ErkJggg==";
When run in Firefox, it shows 12,189,148,62
. In Chromium it shows 12,185,144,62
. But the original values are 12,187,146,62
.
Can anyone explain this?