Javascript 图像处理 反转颜色

Question

我正在尝试使用 javascript 处理网页内的图像，这很痛苦。 除了浏览器之外，我没有编码平台 atm。我认为它应该反转颜色，但我不确定是什么搞砸了。我的脚本有什么问题吗？

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

Answer 1

如果您使用的是 MS Internet Explorer，则以下代码应该适用于您

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

在 IE 8 之后，“filter”应替换为“-ms-filter”

也是一个更智能的方法sohtanaka网站提到的方式，使用jquery和css来完成所需的效果
http://www.sohtanaka.com/web- design/grayscale-hover-effect-w-css-jquery/

希望这对您有帮助:-)

Answer 2

xolor 库 有一个 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
    })
}

Answer 3

这适用于 canvas 上下文，但您正在处理图像。创建一个画布并将图像数据复制到其中，然后反转颜色。