Canvas PutImageData потеря цвета без / с низким альфа

Question

Есть изображение 3х3.CanvasPixelArray:

[12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255,12,24,48,255]

Я изменяю альфа всех пикселей на 0 и обратно на:

bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 0
this.gfx.putImageData(bobs,0,0)
bobs = this.gfx.getImageData(0,0,3,3).data
for (a=3;a<bobs.data.length;a+=4)
bobs.data[a] = 255
this.gfx.putImageData(bobs,0,0)

Все пиксели стали черными.Браузер изменил цвета на черный для экономии памяти.Есть ли способ предотвратить это или я должен сохранить дубликат?

Answer 1

Я думаю, что причина этого в том, что Canvas использует предварительно умноженную альфа, то есть все значения rgb умножаются на альфа-значение для этих пикселей. Это сделано для ускорения альфа-смешивания с фонами и т. Д.

В этой статье есть раздел о предварительно умноженном альфа: Википедия: Alpha_compositing

Вам, вероятно, придется либо, как вы говорите, сохранить копию неизмененных значений, либо, возможно, сохранить альфа-значение для изображения и установить свойство globalAlpha перед рисованием изображения. (Когда я говорю image, вы можете создать холст 3х3, сохранить пиксели и использовать drawImage (), чтобы нарисовать его на основном холсте).