javascript - 使用Canvas将不透明像素变成白色

Question

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

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

Answer 1

Canvas API 具有专门用于“仅在原始图像中不透明的像素上绘制”之类的合成方法。这比弄乱图像数据要容易得多。

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

向@WilliamVanRensselaer 最初的 fiddle 致敬。

您想要的复合操作是 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);
}

reference