Colorize Or Replace The Color Of A Textured Image By A Specified Color Using Javascript And Html5 Canvas.like Color Blend Mode In Ps
I have a textured image with color. What i want is to change the color of the image but retaining its texture. i already know how to get the data of an image,pixel by pixel(the rg
Solution 1:
Here's an interactive solution. Run it from localhost and specify a valid image.
<!DOCTYPE html><html><head><script>functionbyId(e){returndocument.getElementById(e);}
functionnewEl(tag){returndocument.createElement(tag);}
functionnewTxt(txt){returndocument.createTextNode(txt);}
window.addEventListener('load', mInit, false);
functionmInit()
{
var srcImg = byId('srcImg');
byId('hueSlider').style.width = srcImg.width + "px";
var destImg = byId('dstImg');
destImg.width = srcImg.width;
destImg.height = srcImg.height;
}
functioncolorize()
{
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.comfunctionhsl2rgb (h, s, l) {
var r, g, b, m, c, x
if (!isFinite(h)) h = 0if (!isFinite(s)) s = 0if (!isFinite(l)) l = 0
h /= 60if (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
} elseif (h < 2) {
r = x
g = c
b = 0
} elseif (h < 3) {
r = 0
g = c
b = x
} elseif (h < 4) {
r = 0
g = x
b = c
} elseif (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.comfunctionrgb2hsl (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) / 2if (max == min) {
h = s = 0
} else {
d = max - min
s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
switch (max) {
caser:
h = (g - b) / d + (g < b ? 6 : 0)
breakcaseg:
h = (b - r) / d + 2breakcaseb:
h = (r - g) / d + 4break
}
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><imgid='srcImg'src='handlebars.png'/><canvasid='dstImg'></canvas><br><label><inputtype='checkbox'id='colCheckBox'onchange='colorize()' />Colourize</label><br>
Hue<inputid='hueSlider'onchange='colorize()'type='range'min='0'max='359'/><divid='hueVal'></div><br>
Saturation<inputid='satSlider'onchange='colorize()'type='range'value='50'min='0'max='100'/><divid='satVal'></div><br>
Luminance<inputid='lumSlider'onchange='colorize()'type='range'min='0'max='200'/><divid='lumVal'></div></body></html>
Post a Comment for "Colorize Or Replace The Color Of A Textured Image By A Specified Color Using Javascript And Html5 Canvas.like Color Blend Mode In Ps"