使用 Canvas 将不透明像素变为白色

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

reference

Answer 2

这里有一些东西可以帮助您入门。如果 alpha 不为零，这基本上会将像素更改为白色，但您可以根据需要进行修改。

示例：http://jsfiddle.net/Q27Qc/

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

// Put something on the canvas (can be an image)
ctx.font = "100px Arial";
ctx.fillText( "Google", 20, 130 );

// Get image data for part of the canvas (to see effects)
var img = ctx.getImageData( 20, 40, 80, 100 ),
    imgData = img.data;

// Loops through bytes and change pixel to white if alpha is not zero.
for ( var i = 0; i < imgData.length; i += 4 ) {
    if ( imgData[i + 3] !== 0 ) {
        imgData[i] = 255;
        imgData[i + 1] = 255;
        imgData[i + 2] = 255;
    }
}

// Draw the results
ctx.putImageData( img, 20, 40 );