使用"画布"将非透明像素变为白色

Question

我正在寻找一种方法来拍摄图像(徽标,应用程序图标等)并使用javascript/canvas将它们转换为白色(不包括透明度).

这是我想要的一个例子(显然使用静态图像):http: //jsfiddle.net/4ubyj/

Answer 1

canvas API具有专门用于"仅在原始图像中不透明的像素上绘制"等内容的合成方法.这比弄乱图像数据容易得多.

jsFiddle示例(现在带有内联图像)

帽子提示@ WilliamVanRensselaer的最初小提琴.

你想要的复合操作source-in,意思是"绘制我想要绘制的不透明部分,只在它们位于被绘制图像中的不透明像素之上."

HTML:

<a href="javascript:doIt()">paint non-transparent regions white</a><br>
<canvas id="canvas" width="600" height="200"></canvas>

使用Javascript:

var canvas = document.getElementById( "canvas" ),
    ctx = canvas.getContext( "2d" );

imgSrc = "http://d.pr/Td69+";
var b = document.getElementsByTagName("body")[0];
var i = document.createElement("img");
i.src = imgSrc;
i.style.setProperty("display", "none");
i.onload = function() {
    ctx.drawImage(i, 0, 0);
}
b.appendChild(i);

window.doIt = function() {
    ctx.globalCompositeOperation = "source-in";

    ctx.fillStyle = "#ffffff";
    ctx.fillRect(0, 0, 600, 200);
}

参考