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濾鏡圖像顏色

回答

相關問題