Html5 Canvas Overlay

Question

Есть ли хорошее решение для рисования растрового изображения с наложенным цветом с помощью canvas?

Я хочу нарисовать растровое изображение с уникальным цветом для всех непрозрачных пикселей. Я не нахожу никакого решения для этого, и это может быть полезно для меня!

Спасибо в

Answer 1

Демо-версия

Один из способов сделать это - перебрать каждый пиксель и изменить значения r / g / b на желаемое значение. Пропустив альфа-значение, он изменит только непрозрачные пиксели на нужный вам цвет.

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Green component
      pix[i+2] = uniqueColor[2]; // Blue component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);

// Just extra if you wanted to display within an img tag.
var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png");