キャンバスを使用して不透明なピクセルを白にする

Question

javascript/canvasを使用して画像（ロゴ、アプリアイコンなど）を白（透明度を除く）に変換する方法を探しています。 がhttp://jsfiddle.net/4ubyj/

Answer 1

キャンバスのAPIのようなもののために、具体的な方法を合成している「だけのオリジナル画像で透明でないピクセルで描画します。」これは、画像データを乱すよりはるかに簡単です。 （今インライン画像付き）

帽子の先端@ WilliamVanRensselaerの最初のバイオリンに

jsFiddle例。

希望する合成操作は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

ここであなたが始めるために何か：

は、ここで私は（明らかに、静止画像を使用して）欲しいものの例です。アルファがゼロでない場合、これは基本的にピクセルを白に変更しますが、必要に応じて変更することができます。

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