使用javascript和HTML5画布将纹理图像的颜色着色或替换为指定的颜色。类似于PS中的颜色混合模式
我有一个彩色纹理图像。我想要的是改变图像的颜色，但保留其纹理。我已经知道如何逐像素（rgb值）获取图像数据。 以下是示例图像：使用javascript和HTML5画布将纹理图像的颜色着色或替换为指定的颜色。类似于PS中的颜色混合模式,javascript,jquery,image,image-processing,Javascript,Jquery,Image,Image Processing,我有一个彩色纹理图像。我想要的是改变图像的颜色，但保留其纹理。我已经知道如何逐像素（rgb值）获取图像数据。 以下是示例图像： 我想把它涂成以下颜色：这是一个交互式解决方案。从localhost运行它并指定一个有效的映像 <!DOCTYPE html> <html> <head> <script> function byId(e){return document.getElementById(e);} function newEl(tag){ret
我想把它涂成以下颜色：这是一个交互式解决方案。从localhost运行它并指定一个有效的映像
<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
window.addEventListener('load', mInit, false);
function mInit()
{
var srcImg = byId('srcImg');
byId('hueSlider').style.width = srcImg.width + "px";
var destImg = byId('dstImg');
destImg.width = srcImg.width;
destImg.height = srcImg.height;
}
function colorize()
{
var curHue = byId('hueSlider').value;
var curSat = byId('satSlider').value;// / 100.0;
var curLum = byId('lumSlider').value / 100.0;
byId('hueVal').innerHTML = curHue;
byId('satVal').innerHTML = curSat;
byId('lumVal').innerHTML = curLum;
var dst = byId('dstImg');
var dstCtx = dst.getContext('2d');
var img = byId('srcImg');
dstCtx.drawImage(img, 0, 0);
var dstImgData = dstCtx.getImageData(0,0,dst.width,dst.height);
var i, j, r,g,b,hsl,rgb, index;
if (byId('colCheckBox').checked)
{
console.log('colourizing');
for (j=0; j<dst.height; j++)
{
for (i=0; i<dst.width; i++)
{
index = (i + j*dst.width) * 4; // 4 bytes/pixel, set index to point to r component of x,y in dst image
r = dstImgData.data[index+0];
g = dstImgData.data[index+1];
b = dstImgData.data[index+2];
hsl = rgb2hsl (r, g, b);
hsl.h = curHue;
//if (hsl.h > 359)
// hsl.h -= 360;
hsl.s = curSat;
hsl.l *= curLum;
rgb = hsl2rgb(hsl.h, hsl.s, hsl.l);
dstImgData.data[index+0] = rgb.r;
dstImgData.data[index+1] = rgb.g;
dstImgData.data[index+2] = rgb.b;
}
}
dstCtx.putImageData(dstImgData,0,0);
}
}
// code taken from nichabi.com
function hsl2rgb (h, s, l) {
var r, g, b, m, c, x
if (!isFinite(h)) h = 0
if (!isFinite(s)) s = 0
if (!isFinite(l)) l = 0
h /= 60
if (h < 0) h = 6 - (-h % 6)
h %= 6
s = Math.max(0, Math.min(1, s / 100))
l = Math.max(0, Math.min(1, l / 100))
c = (1 - Math.abs((2 * l) - 1)) * s
x = c * (1 - Math.abs((h % 2) - 1))
if (h < 1) {
r = c
g = x
b = 0
} else if (h < 2) {
r = x
g = c
b = 0
} else if (h < 3) {
r = 0
g = c
b = x
} else if (h < 4) {
r = 0
g = x
b = c
} else if (h < 5) {
r = x
g = 0
b = c
} else {
r = c
g = 0
b = x
}
m = l - c / 2
r = Math.round((r + m) * 255)
g = Math.round((g + m) * 255)
b = Math.round((b + m) * 255)
return { r: r, g: g, b: b }
}
// code taken from nichabi.com
function rgb2hsl (r, g, b)
{
var max, min, h, s, l, d
r /= 255
g /= 255
b /= 255
max = Math.max(r, g, b)
min = Math.min(r, g, b)
l = (max + min) / 2
if (max == min) {
h = s = 0
} else {
d = max - min
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0)
break
case g:
h = (b - r) / d + 2
break
case b:
h = (r - g) / d + 4
break
}
h /= 6
}
h = Math.floor(h * 360)
s = Math.floor(s * 100)
l = Math.floor(l * 100)
return { h: h, s: s, l: l }
}
</script>
<style>
body
{
background: #888;
}
#hueVal, #satVal, #lumVal
{
font-size: 0.8em;
font-weight: bold;
display: inline;
}
</style>
</head>
<body>
<img id='srcImg' src='handlebars.png'/><canvas id='dstImg'></canvas>
<br>
<label><input type='checkbox' id='colCheckBox' onchange='colorize()' />Colourize</label>
<br>
Hue<input id='hueSlider' onchange='colorize()' type='range' min='0' max='359'/><div id='hueVal'></div><br>
Saturation<input id='satSlider' onchange='colorize()' type='range' value='50' min='0' max='100'/><div id='satVal'></div><br>
Luminance<input id='lumSlider' onchange='colorize()' type='range' min='0' max='200'/><div id='lumVal'></div>
</body>
</html>
函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
window.addEventListener（'load'，mInit，false）；
函数mInit（）
{
var srcImg=byId（'srcImg'）；
byId（'hueSlider'）.style.width=srcImg.width+“px”；
var destImg=byId（'dstImg'）；
destImg.width=srcImg.width；
Desting.height=srcImg.height；
}
函数colorize（）
{
var curHue=byId（'hueSlider'）。值；
var curSat=byId（'satsslider'）。值；///100.0；
var curLum=byId（'lumSlider'）。值/100.0；
byId（'hueVal'）。innerHTML=curHue；
byId（'satVal'）。innerHTML=curSat；
byId（'lumVal'）。innerHTML=curLum；
var dst=byId（'dstImg'）；
var dstCtx=dst.getContext（'2d'）；
var img=byId（'srcImg'）；
dstCtx.drawImage（img，0，0）；
var dstImgData=dstCtx.getImageData（0,0，dst.width，dst.height）；
var i、j、r、g、b、hsl、rgb、指数；
if（byId（'colCheckBox'）。选中）
{
console.log（“着色”）；
对于（j=0；j 0.5？d/（2-最大值-最小值）：d/（最大值+最小值）
开关（最大值）{
案例r：
h=（g-b）/d+（g
着色
色调
饱和度
亮度
-webkit filter