Используйте 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);
}

ссылка

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