JavaScript filter image color

后端未结

关注

 3  967

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 (a

相关标签:

3条回答

遇见更好的自我

2021-01-14 19:23

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>

0 讨论(0)

无人共我

2021-01-14 19:24

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

清歌不尽

2021-01-14 19:30

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">

0 讨论(0)