Użyj płótna, aby zmienić nieprzezroczyste piksele, biały

Question

Szukam sposobu na robienie zdjęć (logo, ikony aplikacji itp.) I przekształcanie ich na biały (z wyjątkiem przezroczystości) przy użyciu javascript/canvas.

Oto przykład tego, co chciałbym (za pomocą obrazów statycznych, oczywiście): http://jsfiddle.net/4ubyj/

Answer 1

Płótno API posiada metody teraz składanie specjalnie na takie rzeczy jak „wyciągnąć jedynie na piksele, które nie są przezroczyste w oryginalnym obrazie.” Jest to znacznie łatwiejsze niż zakłócanie danych obrazu.

jsFiddle przykład (teraz z inlined obrazu)

wskazówka kapelusz do pierwotnego użytkownika @ WilliamVanRensselaer skrzypcach.

Operacja złożona, którą chcesz wykonać, to source-in, co oznacza "narysuj nieprzezroczyste części tego, co próbuję namalować tylko tam, gdzie znajdują się one na nieprzezroczystych pikselach na rysowanym obrazie".

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

Oto coś na początek. Zasadniczo zmienia piksel na biały, jeśli alfa nie wynosi zero, możesz dokonać modyfikacji, jeśli chcesz.

Przykład: 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);