jsFiddle示例（现在带有内联图片）

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

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

2 个答案:

jsFiddle示例（现在带有内联图片）