转换图像颜色，而不更改其透明背景 [英] Convert Image Color without changing its transparent background

问题描述

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

我googled了很多，并发现一些解决方案（与Canvas），可以改变图像的颜色，如

您可以获取包含图像的RGBA像素的数组资料使用 context.getImageData

  var imageData = context .getImageData（0,0，canvas.width，canvas.height）; 
 
 var data = imageData.data; 
  

从这里可以读取（并且可以更改）每个像素的颜色。 strong>

rgba数组的布局如下：

  //左上像素（x：0，y：0）
 
 data [0]像素＃0的红色（0-255）
 data [1]像素＃0的绿色（0-255）
 data [2]像素＃0的蓝色（0-255）
数据[3]像素＃0的alpha（不透明度：0-255）
 
 //下一个像素（x：1，y：0）
 
 data [4]像素＃1的红色
 data [5]像素＃1的绿色
 data [ 6]像素＃1的蓝色$ 1 
数据[7]像素＃1的阿尔法
  

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

例如，

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

关于透明度：

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

  // alpha是0-255 
 //忽略具有alpha< 200（忽略大多数半透明的所有像素）
 
 if（data [3]< 200）{//不处理此像素} 
  .putImageData 将修改后的像素推回到画布上。 
  
  context.putImageData（imageData，0,0）; 
  
 有关演示的注意事项
 
 
 
使用画布的默认RGBA颜色方案很难重新着色图片。
 
 
 
因此，本演示将RGB数据转换为HSL颜色方案。这允许改变颜色（色调）而不影响像素的其他分量（S =颜色的饱和度，L =颜色的亮度）。
 
 
 
像素重新着色后，修改的HSL数据将转换回RGBA并保存到数据数组。
 
Does anybody have a good solution to change the color of a non-transparent area, with the help of HTML5 or Canvas (or any other HTML5 technology).

I googled a lot and found some solution (with Canvas) which can change the color of an image,like,

How do i tint an image with HTML5 Canvas?

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

But these solution also change the transparent background to the given color (which i don't want).



Its a stackoverflow png image with transparent background. Now, i want to change image color without affecting its transparent pixels(background), so that i am able to save an image again with the help of canvas toDataURL method with new color.

I am not sure whether is it possible with HTML5 or not. Any help is highly appreciated.

Thanks in Advance.

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

Added new Image of Pill (capsule).

解决方案
A Demo (see note about this demo below):  http://jsfiddle.net/m1erickson/2d7ZN/



You can get an array containing the image's RGBA pixel data using context.getImageData
var imageData=context.getImageData(0,0,canvas.width,canvas.height);

var data=imageData.data;
From there you can read (and optionally change) the color of each pixel.

The rgba array is laid out like this:
// 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
You can change the R,G,B or A component of any pixel by changing the data array

For example, this changes the top left pixel to solid red
data[0]=255;   // red
data[1]=0;     // green
data[2]=0;     // blue
data[3]=255;   // alpha (opacity)
About transparency: 

The alpha component of each pixel determines that pixel's transparency.  If you only want to modify mostly opaque pixels then you can easily ignore all the semi-transparent pixels like this:
// 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 }
Finally, you can push your modified pixels back to the canvas with .putImageData
context.putImageData(imageData,0,0);
Note about the Demo

It's difficult to "recolor" an image using the canvas's default RGBA color scheme.

So this demo converts the RGB data to the HSL color scheme.  This allows the "color" (hue) to be changed without affecting the other components of the pixel (S=saturation of the color, L=lightness of the color).

After the pixel is recolored, that modified HSL data is converted back to RGBA and saved to the data array.

                        
这篇关于转换图像颜色，而不更改其透明背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！