Javascript图像处理反转颜色 [英] Javascript Image manipulation Invert color

问题描述

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

I am trying to play with an image inside a webpage using javascript and it is being a pain. I have no coding platform atm except my browser. It should invert the color I think but i'm not sure what is screwing up. What is wrong with my script?

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

推荐答案

这可以在 canvas 上下文中使用，但是您正在处理图像.创建一个 canvas 并将图像的数据复制到其中，然后然后反转颜色.

That would work on a canvas context, but you're working with an image. Create a canvas and copy the image's data into it and then invert the colors.

这篇关于Javascript图像处理反转颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！