Question

I am trying to play with an image inside a webpage using javascript and it is being a pain.
I have no coding platform atm except my browser. It should invert the color I think but i’m not sure what is screwing up. What is wrong with my script?

<img src="C:\Documents and Settings\_username_\Desktop\rabbit.jpg" name="myimage" id="myimage">
<input type="button" value="Click Here" onClick="doSomething();">
<SCRIPT language=JavaScript>

  function doSomething(){

    var imgd = myimage.getImageData(x, y, width, height); 
    var pix = imgd.data;  

    for (var i = 0, n = pix.length; i < n; i += 4) {
       pix[i  ] = 255 - pix[i  ]; // red
       pix[i+1] = 255 - pix[i+1]; // green
       pix[i+2] = 255 - pix[i+2]; // blue
       // i+3 is alpha (the fourth element) 
    }  

    myimage.putImageData(imgd, x, y); 
  }
</SCRIPT>

Answer 1

That would work on a canvas context, but you’re working with an image. Create a canvas and copy the image’s data into it and then invert the colors.