HTML5 Canvas：为图像着色答案

【问题标题】：HTML5 Canvas: Colorize imageHTML5 Canvas：为图像着色
【发布时间】：2012-03-04 12:12:06
【问题描述】：

我想更改图像/画布的颜色。我现有的代码：

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）？

【问题讨论】：

你看过这个吗？ stackoverflow.com/questions/2688961/…

标签： html canvas html5-canvas colorize

【解决方案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.

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

【讨论】：

不...我想给图像“着色”，例如它会有更多的红色。
@xpepermint 获取图像数据（getImageData()）并增加每个像素的red值。
@xpepermint 我正在做一个例子，准备好后会更新帖子。
@alex BTW，我没有得到这个Math.max(255, data.data[i])。我猜它总是会返回 255 那么为什么要使用这个函数呢？为什么不直接data.data[i] = 255？

【解决方案2】：

在这个问题中解释：

How do i tint an image with HTML5 Canvas?

在这里：http://www.playmycode.com/blog/2011/06/realtime-image-tinting-on-html5-canvas/

【讨论】：