Usa Canvas per trasformare i pixel non trasparenti bianchi

Question

Sto cercando un modo per scattare immagini (loghi, icone di app, ecc.) E convertirli in bianco (trasparenza esclusa) usando javascript/canvas.

Ecco un esempio di quello che mi piacerebbe (usando immagini statiche, ovviamente): http://jsfiddle.net/4ubyj/

Answer 1

L'API tela ha metodi di composizione specificamente per cose come "disegnare solo sui pixel non trasparenti nell'immagine originale." Questo è molto più facile che fare scherzi con i dati dell'immagine.

jsFiddle esempio (ora di immagini inline con)

Punta di cappello a @ di WilliamVanRensselaer violino iniziale.

L'operazione composita che si desidera è source-in, che significa "disegnare le parti opache di ciò che sto cercando di dipingere solo dove sono sopra i pixel opachi nell'immagine disegnata".

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

Ecco qualcosa per iniziare. In pratica cambia il pixel in bianco se l'alfa non è zero, puoi comunque apportare delle modifiche se lo desideri.

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