...

View Full Version : Need script to change the color of region in a image



sureshk
07-21-2009, 09:39 AM
Hi ,

I need one javascript, which is going to change the color of the region in the particular image. For example one boy wearing the blue color t-shirts, i

want to change the blue color into red color by using the color code instead of chaging the image into new one.

Whether is this possible to do in javascript ?

Any help greatly appreciated.

Thanks,
Suresh.k

TinyScript
07-21-2009, 05:25 PM
you could use getImageData with the canvas tag and manipulate the data array, filtering the color by changing the values of the pixels in the corresponding red blue green array values.

http://www.colorjack.com/labs/colormatrix/
http://www.pixastic.com/

There are many other scripts to be found using search terms
javascript canvas getImageData filter color

http://www.robodesign.ro/coding/canvas-primer/20081208/example-imagedata.html

Here's that script above which I modified to test and learn (still working on that learning stuff)
I had to add the permission part (found after extensive google search) so you can use local images, otherwise it violates some security issue with images and location, but it'll prompt you first before working and you can tell it to remember the setting. The script worked before if the image was not local, if I recall correctly, so you can remove that part.


My plan was to create a way to alter the different color chanels. It's pretty easy, but I didn't get around to playing with it yet. Having fully understood the concepts, I moved on to other javascript areas in which my skills were lacking.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Canvas Primer - Example: ImageData colour inversion filter</title>
<script type="text/javascript">


function runcolors(colorNum) { var elem = document.getElementById('myCanvas');


// Get the canvas 2d context.
var context = elem.getContext('2d');


// Create a new image.
var img = new Image();
img.src = 'logoBig.jpg';
elem.width=img.width
elem.height=img.height
// Once it's loaded draw the image on canvas and invert the colors.
img.addEventListener('load', function () {
var x = 0, y = 0;

// Draw the image on canvas.

context.drawImage(this, x, y,this.width,this.height,x,y,this.width,this.height);

// Get the pixels.

try {
try {
var imgd = context.getImageData(x, y, img.width, img.height);
} catch (e) {
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
var imgd = context.getImageData(x, y, img.width, img.height);
}
} catch (e) {
throw new Error("unable to access image data: " + e);
}

var pix = imgd.data;

// Loop over each pixel and invert the color.
for (var i = 0, n = pix.length; i < n; i += 4) {
pix[i ] = 255 - pix[i ]; // red
pix[i+1] = 255 - pix[i+1]*colorNum; // green
pix[i+2] = 255 - pix[i+2]; // blue
// i+3 is alpha (the fourth element)
}

// Draw the ImageData object.
context.putImageData(imgd, x, y);
}, false);


}
/*todo: make this function work.
function rgb2lum( r, g, b ) {
return( (0.299/255.0)*r + (0.587/255.0)*g + (0.114/255.0)*b );
}
*/
</script>
</head>
<body onload="runcolors(1)">
<canvas id="myCanvas" width="150" height="150" onmouseover="runcolors(.75)"></canvas>

</body>
</html>

TinyScript
07-21-2009, 05:55 PM
I forgot to add.

You'll want to use a transparent image of the region you want to filter the color. So if it's a T shirt, you'll want just the shirt.

it's possible to to clip the image using the canvas tag and then use that canvas(which you clipped as the Tshirt) as the image in another canvas which will serve as the main image.

You create the canvas for the Tshirt image off screen and then using drawImage(firstCanvasName,....), with firstCanvasName being the id of the canvas that's offscreen, you can now draw that canvas as an image on other canvases.

here's a script to show this concept


<!DOCTYPE HTML>
<head></head>
<body onload="draw()">

<p><canvas width="500" height="500" id="c" style="border: solid"></canvas>
<canvas width="500" height="500" id="cc" style="border: solid"></canvas>
<object data="Image.jpg"></object>
<script>
var angle=0
var pic=new Image()
pic.src="Image.jpg"


function draw() {
angle+=1
var compositeTypes = [
'source-over', /*0*/
'source-in', /*1*/
'source-out', /*2*/
'source-atop', /*3*/
'destination-over', /*4*/
'destination-in', /*5*/
'destination-out', /*6*/
'destination-atop', /*7*/
'lighter', /*8*/
'darker', /*9*/
'copy', /*10*/
'xor' /*11*/
];
var imgcap=document.getElementById('c');
var imgcap2=document.getElementById('cc');
var ctx=document.getElementById('c').getContext('2d');
var ctx2 = document.getElementById('cc').getContext('2d');

ctx2.save()
ctx2.clearRect(0,0,500,500)
ctx2.beginPath()
ctx2.translate(150,150)
ctx2.closePath()
ctx2.rotate((360-angle)*Math.PI*2/360)
ctx2.transform(1-Math.cos(angle/360),Math.cos(angle/360),Math.sin(angle/360),1-Math.sin(angle/360),0,0)
ctx2.fillStyle="rgba(0,255,0,.3)"
ctx2.translate(-50,-50)
ctx2.fillRect(0,0,100,100)
ctx2.restore()
ctx.save()
ctx.clearRect(0,0,500,500)
ctx.fillStyle = '#f00';
ctx.strokeStyle = '#00f';
ctx.fillRect(30, 10, 10, 10);
ctx.strokeRect(60, 10, 10, 10);
ctx.restore()
ctx.save()
ctx.rotate(Math.PI/4)
ctx.drawImage(imgcap, 0, 0);
ctx.restore()
ctx.save()
ctx.drawImage(pic,200,0)
ctx.restore()
ctx.save()
//ctx2.globalCompositeOperation = compositeTypes[3]
ctx.drawImage(imgcap2,100,100,200,200, 150, 50,100,100)
ctx.restore()
if (angle==360){angle%=360}

}
setInterval("draw()",50)
</script>
</body></html>

Philip M
07-22-2009, 09:01 AM
I want to change the blue color into red color by using the color code instead of changing the image into new one.


Why not? It is the obvious and easiest solution. Especially if you have several/numerous images. KISS!

Sennaya
09-02-2010, 11:17 PM
Did anyone get image region color swap working on a web page?

It sure would make sense to process one transparent image for the web instead of making 50 masked color photos in Photoshop.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum