转换图像颜色而不更改其透明背景

Question

在HTML5或Canvas（或任何其他HTML5技术）的帮助下，是否有人有一个很好的解决方案来改变非透明区域的颜色。

我google了很多，发现了一些可以改变图像颜色的解决方案（使用Canvas），例如，

How do i tint an image with HTML5 Canvas?

Canvas - Change colors of an image using HTML5/CSS/JS?

但是这些解决方案也将透明背景更改为给定颜色（我不想要）。

它是具有透明背景的stackoverflow png图像。现在，我想在不影响其透明像素（背景）的情况下更改图像颜色，这样我就可以使用带有新颜色的画布toDataURL方法再次保存图像。

我不确定是否可以使用HTML5。任何帮助都非常感谢。

先谢谢。

******************* EDITED *********************

添加了新的药丸图像（胶囊）。

Answer 1

演示（请参阅下面有关此演示的说明）：http://jsfiddle.net/m1erickson/2d7ZN/

您可以使用context.getImageData

获取包含图像RGBA像素数据的数组

var imageData=context.getImageData(0,0,canvas.width,canvas.height);

var data=imageData.data;

从那里你可以阅读（并可选择地改变）每个像素的颜色。

rgba数组的布局如下：

// top-left pixel (x:0,y:0)

data[0]   red of pixel#0 (0-255)
data[1]   green of pixel#0 (0-255)
data[2]   blue of pixel#0 (0-255)
data[3]   alpha of pixel#0 (opacity: 0-255)

// next pixel (x:1,y:0)

data[4]   red of pixel#1
data[5]   green of pixel#1
data[6]   blue of pixel#1
data[7]   alpha of pixel#1

您可以通过更改数据阵列来更改任何像素的R，G，B或A分量

例如，这会将左上角像素更改为纯红色

data[0]=255;   // red
data[1]=0;     // green
data[2]=0;     // blue
data[3]=255;   // alpha (opacity)

关于透明度：

每个像素的alpha分量决定了像素的透明度。如果您只想修改大部分不透明的像素，那么您可以轻松忽略所有半透明像素，如下所示：

// alpha is 0-255
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent)

if( data[3]<200 ) { // don't process this pixel }

最后，您可以使用.putImageData

将修改过的像素推回画布

context.putImageData(imageData,0,0);

关于演示的注意事项

使用画布的默认RGBA颜色方案很难“重新着色”图像。

因此，此演示将RGB数据转换为HSL颜色方案。这允许在不影响像素的其他分量的情况下改变“颜色”（色调）（S =颜色的饱和度，L =颜色的亮度）。

像素重新着色后，修改后的HSL数据将转换回RGBA并保存到数据阵列。