putImageDataα丢失

Question

我花了很多时间来改变透明背景的png文件的颜色。我知道如何在getImageData(ctx，0,100,100).data中设置颜色；但是当我想保存新的PNG图像时，我有了白色的背景.

我有这样的东西：

    var el = document.getElementById('before');
    var ctx = el.getContext('2d');
    var img=new Image();
img.src='src';
    ctx.drawImage(img,0,0,150,150);
    var imgData=ctx.getImageData(0, 0, 150, 150);
    for (var i=0;i<imgData.data.length;i+=4){
        imgData.data[i]=135;
        imgData.data[i+1]=222;
        imgData.data[i+2]=115;
    }
    var es = document.getElementById('after');
    var cts = es.getContext('2d');
    cts.putImageData(imgData,0,0);

示例 (我不知道它为什么在这里，putImageData)

在其他项目中(例如。https://crosspop.in/croquis )它是可实现的，但我找不到解决办法的地方。

您知道如何用透明背景的modyfited创建画布吗？

问候

Answer 1

您的问题与alpha无关:虽然奇怪(您正在改变图像的每个像素，甚至是透明的像素)，但您的算法工作得很好。

但是，您犯了初学者的错误，忘记了看console：您可能已经看到，由于跨源问题(CORS)，无法访问图像的数据。

我修改了您的小提琴，使其使用Base64字符串作为图像，它运行良好：

http://jsfiddle.net/gamealchemist/6aZ7L/3/

var data = imgData.data;
for (var i = 0; i < data.length; i += 4) {
    if (data[i + 3]) {
        data[i] = 135;
        data[i + 1] = 222;
        data[i + 2] = 115;
    }
}

但事实上，有一种更好的重新着色图像的方法，1)避免使用imageData 2)速度更快，3)不存在CORS问题:使用上下文的CORS，这里您可以用绿色填充画布，然后使用目的- in :每个绿色像素只有在复制图像的像素不透明时才会保留。

http://jsfiddle.net/gamealchemist/6aZ7L/4/

function taintIt() {
    var es = document.getElementById('after');
    var cts = es.getContext('2d');
    cts.save();
    cts.fillStyle = 'rgb(135,222,115)';
    cts.fillRect(0, 0, 150, 150);
    cts.globalCompositeOperation = 'destination-in';
    cts.drawImage(img, 0, 0, 150, 150);
    cts.restore();
}

(顺便说一句，-admittedly有点偏离主题了--我试着用模式绘制，很有趣：http://jsfiddle.net/gamealchemist/6aZ7L/6/embedded/result/ )

Answer 2

我补充说：

    cts.fillStyle = "red";
    cts.fillRect(0, 0, 120, 120);

只是以前：

cts.putImageData(imgData, 0, 0);

在你的例子中：http://jsfiddle.net/gamealchemist/6aZ7L/3/ putImageData忽略了alpha，仍然打印一个白色背景..。