gpt4 book ai didi

javascript - 转换图像颜色而不改变其透明背景

转载 作者:技术小花猫 更新时间:2023-10-29 12:10:05 27 4
gpt4 key购买 nike

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

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

How do i tint an image with HTML5 Canvas?

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

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

Stackoverflow image with transparent pixel(background)

它是具有透明背景的 stackoverflow png 图像。现在,我想在不影响其透明像素(背景)的情况下更改图像颜色,以便我能够在 Canvas toDataURL 方法的帮助下使用新颜色再次保存图像。

我不确定 HTML5 是否可行。非常感谢任何帮助。

提前致谢。

*********************已编辑*********************

添加了药丸(胶囊)的新图像。

enter image description here

最佳答案

一个演示(请参阅下面有关此演示的注释):http://jsfiddle.net/m1erickson/2d7ZN/

enter image description here

您可以使用 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 将修改后的像素推回 Canvas

context.putImageData(imageData,0,0);

关于演示的注意事项

很难使用 Canvas 的默认 RGBA 配色方案“重新着色”图像。

因此本演示将 RGB 数据转换为 HSL 配色方案。这允许更改“颜色”(色调)而不影响像素的其他成分(S = 颜色的饱和度,L = 颜色的亮度)。

像素重新着色后,修改后的 HSL 数据将转换回 RGBA 并保存到数据数组中。

关于javascript - 转换图像颜色而不改变其透明背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23830471/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com