ansaurus

Question

Answer 1

A:

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.

Skilldrick 2010-10-12 11:42:49

I'm sorry I didn't note this, but I'll change my post, but I'm trying to do this with IE, and last I heard IE doesn't support the canvas tag. The reason I'm doing it in IE only is because I'm making a small sidebar gadget.

kelton52 2010-10-12 11:44:40

Answer 2

+2 A:

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"&gt;

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

Jerome 2010-10-12 11:50:06

I've looked through them multiple times and I can't find the solution in there.

kelton52 2010-10-12 12:04:32

I've added an exemple for you.

Jerome 2010-10-12 12:26:49

Answer 3

A:

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>

Mikee 2010-10-12 12:30:38

I must not have explained it right...I can understand why you thought this is what I wanted. This works for that purpose, but it wasn't what I was looking for. Thanks though.

kelton52 2010-10-20 11:46:46

ansaurus

tags:

views:

answers:

JavaScript filter image color

related questions