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

问题描述

在 HTML5 或 Canvas(或任何其他 HTML5 技术)的帮助下，有人有什么好的解决方案来更改非透明区域的颜色.

我在谷歌上搜索了很多，找到了一些可以改变图像颜色的解决方案(使用 Canvas)，例如，

您可以使用 context.getImageData

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

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

从那里您可以读取(并可选择更改)每个像素的颜色.

rgba 数组布局如下:

//左上角像素 (x:0,y:0)像素#0 的数据[0] 红色(0-255)像素#0 的数据[1] 绿色 (0-255)像素#0 的数据[2] 蓝色(0-255)data[3] 像素#0 的 alpha(不透明度:0-255)//下一个像素 (x:1,y:0)data[4] 像素的红色#1像素#1 的数据[5] 绿色data[6] 像素的蓝色#1data[7] 像素#1 的 alpha

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

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

data[0]=255;//红色的数据[1]=0；//绿色数据[2]=0；//蓝色数据[3]=255；//alpha(不透明度)

关于透明度:

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

//alpha 为 0-255//忽略 alpha <的像素200(忽略大部分半透明的所有像素)if( data[3]<200 ) {//不处理这个像素 }

最后，您可以使用 .putImageData

将修改后的像素推回到画布上

context.putImageData(imageData,0,0);

关于演示的注意事项

使用画布的默认 RGBA 配色方案很难重新着色"图像.

所以这个demo将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屋！