Question

我有完全透明的图像，我想获得每个像素的rgb数据。把它想象成一幅隐藏的画面。

在javascript中操作图像数据的常用方法是

ctx.drawImage(img, 0, 0);

但是，如果我在绘制后访问画布数据，则所有像素都是黑色的。我已经确认我可以使用php GD显示图片。

关于如何在js中进行操作的任何想法？

编辑：我知道我可以获得一个直接解析图像数据的js库，但我正在寻找一个带库的解决方案。

Answer 1

使用预乘alpha的Canvas底层缓冲区存储像素。绘制rgba像素时，RGB部分在写入缓冲区之前乘以alpha值。

例如:(在ARGB中）0x8080FF40将存储为0x80408020

canvas规范期望getImageData的结果是非预乘的。这意味着从缓冲区读取的值现在划分除以alpha值，以获取“原始”RGB值。

首先转换是有损的，因为预乘值会失去精度。

Secondely，完全透明的像素是“完全破坏性的精度损失”的极端情况，因为RGB值存储为缓冲区为零，并且不能通过非预先复制来进行检索。

Answer 2

在canvas API中，alpha为0的每个像素都被视为黑色透明像素。

＆＃13;

var c =  document.createElement('canvas');
var ctx = c.getContext('2d');
c.width = c.height = 1;
ctx.fillStyle = 'rgba(0,255,0,0)'
ctx.fillRect(0,0,1,1)
var i = ctx.getImageData(0,0,1,1)
console.log('after fillRect:',i.data);

i.data[2] = 255;
ctx.putImageData(i,0,0);
console.log('after putImageData', ctx.getImageData(0,0,1,1).data);

console.log('passed imageData', i.data);

i.data[3] = 1;
ctx.putImageData(i,0,0);
console.log('after non transparent', ctx.getImageData(0,0,1,1).data);

＆＃13;

这是因为，对于表演，浏览器会预先将颜色_{乘以在pleup的答案}中有详细解释，在这种情况下，它允许它完全省略绘图中的透明像素操作，并仅为putImageData将其设置为透明黑色。

无论如何，即使您能够将颜色设置为非黑色透明像素，导出方法也可能会将其重新转换回透明黑色像素。

如何从js中的透明像素获取rgb

2 个答案: