JavaScript滤镜图像颜色

嘿，我正在寻找一种采用黑白img元素的方法，并使用JavaScript指定一个RGB值，以便图像变成该颜色。任何想法（除了图书馆）？JavaScript滤镜图像颜色

此外，我试图用IE浏览器做到这一点。我只在IE中使用它的原因是因为我正在制作一个小的侧边栏小工具。

2010-10-12 Kelly Elton

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

来源

2010-10-12 11:50:06 Jerome

我已经通过他们多次查看，我找不到解决方案。 – 2010-10-12 12:04:32

我已经为你添加了一个例子。 – Jerome 2010-10-12 12:26:49

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

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

来源

2010-10-12 11:42:49 Skilldrick

对不起，我没有注意到这一点，但我会改变我的帖子，但我试图用IE做到这一点，最后我听说IE不支持canvas标签。我只在IE中使用它的原因是因为我正在制作一个小的侧边栏小工具。 – 2010-10-12 11:44:40

像这样的事情？

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

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

来源

2010-10-12 12:30:38 Mikee

我一定没有解释正确的......我可以理解你为什么认为这是我想要的。这适用于这个目的，但这不是我想要的。不过谢谢。 – 2010-10-20 11:46:46

JavaScript滤镜图像颜色

回答

相关问题