Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Need script to change the color of region in a image

    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

  • #2
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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/canv...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.

    Code:
    <!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>

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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
    Code:
    <!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>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Quote Originally Posted by sureshk View Post
    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!

  • #5
    New to the CF scene
    Join Date
    Sep 2010
    Location
    http://www.aztecaTheater.com
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Did anyone get image region color swap working?

    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •