Question

我花了很多时间用透明背景来改变png文件的颜色。我知道如何在getImageData（ctx，0,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);

EXAMPLE （我不知道为什么它在这里putImageData）

在其他项目中（例如https://crosspop.in/croquis）它是可行的，但我无法找到解决方案的位置。

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

问候

Answer 1

您的问题与alpha无关：虽然奇怪（您正在更改图像的每个像素，甚至是透明的像素），您的算法也能正常工作。
但是你让初学者的错误忘记了控制台：你已经看到由于跨源问题而无法访问图像的数据（<强> 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问题：使用上下文的 globalCompositeOperation ，在这里你可以用绿色填充画布，然后使用目的地：只有当复制的图像的像素不是时，才会保留每个绿色像素透明的。

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();
}

（顺便说一下 - 无论如何有点偏离主题 - 我试图用模式绘制，它很有趣： http://jsfiddle.net/gamealchemist/6aZ7L/6/embedded/result/）

Answer 2

我补充说：

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

juste之前：

cts.putImageData(imgData, 0, 0);

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

putImageData alpha丢失了

2 个答案: