CODEWITHSUNDEEP
javascriptimagecolors
Kelly Elton
Kelly Elton

Reputation: 4427

JavaScript filter image color

Hey, I'm looking for a way to take a black and white img element, and using JavaScript, specify an RGB value so that the image becomes that color. Any ideas (aside from libraries)?

Also I'm trying to do this with IE only. The reason I'm doing it in IE only is because I'm making a small sidebar gadget.

Upvotes: 4

Views: 10308

Answers (3)

Jerome
Jerome

Reputation: 8447

In Internet Explorer, you could use Visual Filters.

Edit: you want to use the Light filter, here is an exemple

<STYLE>
   .aFilter {
            filter:light();
        }
</STYLE>
<SCRIPT>
window.onload=fnInit;
function fnInit(){
   oDiv.filters[0].addAmbient(50,20,180,100);
}
</SCRIPT>
with filter: <img CLASS="aFilter" ID="oDiv" src="http://cache2.artprintimages.com/p/LRG/8/853/2USY000Z/black-and-white-cats.jpg">

without: <img src="http://cache2.artprintimages.com/p/LRG/8/853/2USY000Z/black-and-white-cats.jpg">

Upvotes: 3

Mikee
Mikee

Reputation: 2563

Something like this?

Edit: Ah, no canvas. No worries.

<html>
  <head>
  <script type="text/javascript">
  function createCanvas(image){

    // create a new canvas element
    var myCanvas = document.createElement("canvas");
    var myCanvasContext = myCanvas.getContext("2d");


    var imgWidth=image.width;
    var imgHeight=image.height;

    // set the width and height to the same as the image
    myCanvas.width= imgWidth;
    myCanvas.height = imgHeight;

    // draw the image
    myCanvasContext.drawImage(image,0,0);

    // get all the image data into an array
    var imageData = myCanvasContext.getImageData(0,0, imgWidth, imgHeight);


    // go through it all...
    for (j=0; j<imageData.width; j++)
    {
      for (i=0; i<imageData.height; i++)
      {
         // index: red, green, blue, alpha, red, green, blue, alpha..etc.
         var index=(i*4)*imageData.width+(j*4);
         var red=imageData.data[index];
         var alpha=imageData.data[index+3];

         // set the red to the same
         imageData.data[index]=red;

         // set the rest to black
         imageData.data[index+1]=0;
         imageData.data[index+2]=0;
         imageData.data[index+3]=alpha;
         delete c;
       }
     }

     // put the image data back into the canvas
     myCanvasContext.putImageData(imageData,0,0,0,0, imageData.width,   imageData.height);

    // append it to the body
    document.body.appendChild(myCanvas);
  }
  function loadImage(){
    var img = new Image();
    img.onload = function (){
      createCanvas(img);
    }
    img.src = "monkey.jpg";
  }
  </script>
  </head>
  <body onload="loadImage()">

  </body>
  </html>

Upvotes: 3

Skilldrick
Skilldrick

Reputation: 70819

The only way you'll be able to do this in JavaScript is with the <canvas> tag. Here is an excellent tutorial if you're interested in learning how to use it.

Edit: I'm not an expert on MS proprietary filters, but here are the Microsoft docs for image filters in IE.

Upvotes: 0

Related Questions