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后，“过滤器”应替换为“ -ms-filter ”

在sohtanaka网站上也提到了一种更聪明的方法，它使用jquery和css来完成所需的效果 http://www.sohtanaka.com/web-design/greyscale-hover-effect-w-css-jquery/

希望这可以帮助你： - ）

Answer 2

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

Answer 3

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

Javascript图像处理反转颜色

3 个答案: