HTML5 Canvas : Colorize image

Question

我想更改图像/ Canvas 的颜色。我现有的代码:

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 .

这将使每个像素的红色值最大化。试用它以获得您想要的效果。