HTML canvas возвращает байты "off-by-some" из getImageData

Question

Я обнаружил, что getImageData холста HTML, похоже, возвращает неправильные значения байтов.

Я сгенерировал изображение 1x1 px со следующим Python кодом:

from PIL import Image
import numpy as np

a = np.array([[[12, 187, 146, 62]]], dtype=np.uint8)
Image.fromarray(a).save('image.png')

Я преобразовал изображение в base64, чтобы включить его в этот фрагмент кода:

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==";

При запуске в Firefox отображается 12,189,148,62. В хроме это показывает 12,185,144,62. Но исходные значения 12,187,146,62.

Может кто-нибудь объяснить это?

Answer 1

Firefox ошибка округления перед умножением

Я могу подтвердить, что FF (Firefox) действительно возвращает значение пикселя как [12,189,148,62]

При рендеринге на холст пиксели обрабатывается в соответствии со значением globalCompositeOperation, которое по умолчанию равно "source-over". Вычисление выполняется для предварительно умноженных альфа-значений, для которых FF закругляется неправильно FF [3,46,36,255] и Chrome [3,45,35,255].

Chrome имеют правильные значения, как показано в следующем фрагменте.

// correct pre mult alpha 
console.log([12,187,146].map(c => Math.round(c * 62 / 255)) + "");

FF округляется по какой-то причине, и я считаю, что это ошибка

Эта ошибка округления (в FF) влияет на результат компоновки "source-over", когда alpha: true приводит к значениям, превышающим ожидаемые.

Для получения дополнительной информации о компоновке W3 C Компоновка и смешивание

Исправить?

Я не могу предложить исправление, только сказать, что Chrome правильно отображает изображение, а FF - нет.