JavaScript 过滤图像颜色答案

【问题标题】：JavaScript filter image colorJavaScript 过滤图像颜色
【发布时间】：2011-04-24 06:34:03
【问题描述】：

嘿，我正在寻找一种方法来获取黑白 img 元素，并使用 JavaScript 指定 RGB 值，以便图像变为该颜色。有什么想法（除了图书馆）？

我也尝试仅使用 IE 来执行此操作。我只在 IE 中这样做的原因是因为我正在制作一个小的侧边栏小工具。

【问题讨论】：

标签： javascript image colors

【解决方案1】：

您能够在 JavaScript 中执行此操作的唯一方法是使用 <canvas> 标记。 Here is an excellent tutorial如果你有兴趣学习如何使用它。

编辑：我不是 MS 专有过滤器方面的专家，但这里是 IE 中图像过滤器的 Microsoft docs。

【讨论】：

对不起，我没有注意到这一点，但我会改变我的帖子，但我正在尝试用 IE 来做这个，最后我听说 IE 不支持画布标签.我只在 IE 中这样做的原因是因为我正在制作一个小的侧边栏小工具。

【解决方案2】：

在 Internet Explorer 中，您可以使用 Visual Filters。

编辑：你想使用Light filter，这里是一个例子

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

【讨论】：

我已经查看了很多次，但在其中找不到解决方案。
我为你添加了一个例子。

【解决方案3】：

这样的？

编辑：啊，没有画布。不用担心。

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

【讨论】：

我一定没有解释清楚...我能理解你为什么认为这就是我想要的。这适用于该目的，但这不是我想要的。不过还是谢谢。