代码实例：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>图片反色</title>
<style type="text/css">
body{ background:black;}
#c1{ background:white;}
</style>
<script type="text/javascript">
window.onload=function()
{
var oC=document.getElementById('c1');
var oGC=oC.getContext('2d');
var oImg=new Image();
oImg.onload=function()//图片预加载后才可以操作
{
draw(this);
}
oImg.src='1.PNG';
function draw(obj)
{
oC.width=obj.width;//将画布设为图片宽的一倍
oC.height=obj.height*2;//将画布设为图片高的两倍，以用来倒影
oGC.drawImage(obj,0,0);//将图片画在画布上
var newImg=oGC.getImageData(0,0,obj.width,obj.height);//得到图片数据
var ONewImg = oGC.createImageData(obj.width,obj.height);
//重要。要创建新的图片数据再将原来的反色后色数据赋值，
// 如果直接在原数据上操作数据会导致数据覆盖而得不到结果
for(var i=0;i<newImg.height;i++)
{
for(var j=0;j<newImg.width;j++)
{
var color = getXY(newImg,j,i);//得到原来图片数据，一个像素有四个值，分别代表rgba
var result = [];
result[0] = 255 - color[0];
result[1] = 255 - color[1];
result[2] = 255 - color[2];
result[3] = 255*i/newImg.height;
setXY(ONewImg,j,newImg.height-i,result);//设置到新的数据里面
}
}
oGC.putImageData(ONewImg,0,obj.height);//将图片数据设置到画布中
}
//获取rgba
function getXY(obj,x,y)
{
var w=obj.width;
var h=obj.height;
var data=obj.data;
var color=[];
color.push(data[(y*w+x)*4]);
color.push(data[(y*w+x)*4+1]);
color.push(data[(y*w+x)*4+2]);
color.push(data[(y*w+x)*4+3]);
return color;
}
//设置rgba
function setXY(obj,x,y,color)
{
var w=obj.width;
var h=obj.height;
var data=obj.data;
data[(y*w+x)*4]=color[0];
data[(y*w+x)*4+1]=color[1];
data[(y*w+x)*4+2]=color[2];
data[(y*w+x)*4+3]=color[3];
}
}
</script>
</head>
<body>
<canvas id="c1" width="500" height="500"></canvas>
</body>
</html>
图片：
效果：
2017-09-09 22:40:39