HTML5 Canvas: раскрасить изображение

Question

Я хотел бы изменить цвет изображения / холста.Мой существующий код:

var loader = new PxLoader()
var image = loader.addImage('images/balloon.png')
loader.addCompletionListener(functio() {
  var canvas = $("<canvas>").attr("width", "200").attr("height", "200");
  var context = canvas[0].getContext('2d');
  context.clearRect(0, 0, 200, 200);
  context.drawImage(image, 0, 0);
  // colorize??????
});

Как мне его раскрасить - дальнейшие манипуляции с контекстом (я хотел бы использовать Pixastic.process, если это возможно)?

Answer 1

Если под colorize вы имеете в виду изменить цвет фона, тогда используйте ....

context.fillColor = '#f0f';

context.fillRect(0, 0, canvas.attr('width'), canvas.attr('height'));

Если вы хотите оттенок цвет, попробуйте ...

var data = ctx.getImageData(0, 0, canvas.attr('width'), canvas.attr('height'));

for (var i = 0, length = data.data.length; i < length; i += 4) {
    data.data[i] = Math.max(255, data.data[i]);
}

context.putImageData(data, 0, 0);

jsFiddle .

Это максимизирует значение красного для каждого пикселя. Поэкспериментируйте с ним, чтобы получить желаемый эффект.

Answer 2

объяснил в этом вопросе:

Как мне подкрасить изображение с помощью HTML5 Canvas?

и здесь: http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/