Javascript圖像處理反轉顏色

我想玩一個使用JavaScript的網頁內的圖像，這是一個痛苦。我沒有編碼平臺atm，除了我的瀏覽器。它應該顛倒我認爲的顏色，但我不確定是什麼搞砸了。我的腳本有什麼問題？Javascript圖像處理反轉顏色

<img src="C:\Documents and Settings\_username_\Desktop\rabbit.jpg" name="myimage" id="myimage"> 
<input type="button" value="Click Here" onClick="doSomething();"> 
<SCRIPT language=JavaScript> 

    function doSomething(){ 

    var imgd = myimage.getImageData(x, y, width, height); 
    var pix = imgd.data; 

    for (var i = 0, n = pix.length; i < n; i += 4) { 
     pix[i ] = 255 - pix[i ]; // red 
     pix[i+1] = 255 - pix[i+1]; // green 
     pix[i+2] = 255 - pix[i+2]; // blue 
     // i+3 is alpha (the fourth element) 
    } 

    myimage.putImageData(imgd, x, y); 
    } 
</SCRIPT>

來源

2011-09-30 Hazior

這將工作在canvas上下文，但你正在處理圖像。創建一個canvas並將圖像的數據複製到它中，然後然後反轉顏色。

來源

2011-09-30 05:04:32 icktoofay

我想在JSFiddle上添加一個例子，但JSFiddle沒有託管任何圖片來測試，並且您不能將圖片從遠程主機複製到「canvas」然後讀取從中。 – icktoofay

您可以從任何服務器下載圖像。例如，在_Google Images_中搜索圖片。 –

@Andrew：仔細閱讀。我說過，如果我從遠程主機獲取圖像並將其繪製到「畫布」中，則無法再檢索像素數據，因此不再反轉圖像。 – icktoofay

如果您正在使用微軟Internet Explorer下面的代碼應該爲你工作

<img src="xyz.jpg" onMouseover="this.style.filter='progid:DXImageTransform.Microsoft.BasicImage(invert=1)'" onMouseout="this.style.filter=''" />

後IE 8吧「過濾」應改爲「-MS-過濾」

在sohtanaka網站上提到了一個更智能的方法，它使用jQuery和CSS來實現所需的效果 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

希望這有助於你:-)

來源

2011-09-30 06:26:09

的xolor library有一個inverse功能：

xolor("rgb(100,200,50").inverse().rgb // returns the inverse in rgb format

其實現這樣的，它已經被解析其中存在作爲對xolor性質的紅色，綠色和藍色值對象：

this.inverse = function() { 
    return xolor({ 
     r: this.r ^= 0xff, 
     g: this.g ^= 0xff, 
     b: this.b ^= 0xff 
    }) 
}

來源

2017-01-17 05:46:51

Javascript圖像處理反轉顏色

回答

相關問題