Canvas相关处理，备忘。
场景：图片浏览网站，多图片平铺展示，各种颜色同时在同一页面展示，容易使用户产生眼花缭乱的感觉。所以多图片浏览可利用Canvas对所有图片进行灰度处理，当用户焦点定位到某一图片时才使该图片“变亮”。
图片灰度处理代码如下：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function pageLoaded(){
var canvas=document.getElementById("myCanvas");
//源图片
var image=document.getElementById("imageSource");
var imageWidht=image.width;
var imageHeight=image.height;
canvas.width=imageWidht;
canvas.height=imageHeight;
var context=canvas.getContext("2d");
//绘制
context.drawImage(image,0,0);
//获取对象 指定矩形范围内的像素数据
var canvasData=context.getImageData(0,0,imageWidht,imageHeight);
/*canvasData.data为图片像素的数组
对于canvasData中每一个像素都包含四方面的信息：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
*/
for(var i=0;i<canvasData.data.length;i+=4){
var r=canvasData.data[i];//R - 红色
var g=canvasData.data[i+1];//G - 绿色 (0-255)
var b=canvasData.data[i+2];//B - 蓝色 (0-255)
var gray = .299 * r + .587 * g + .114 * b;
canvasData.data[i]=gray;//R - 红色
canvasData.data[i+1]=gray;//G - 绿色 (0-255)
canvasData.data[i+2]=gray;//B - 蓝色 (0-255)
canvasData.data[i+3]=255;//A - alpha 通道
}
// 处理完成的数据重新载入到canvas对象中
context.putImageData(canvasData, 0, 0);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img id="imageSource" src="img/bbe.jpg" style="border:1px solid #c3c3c3;"></img>
</body>
</html>
显示效果如图所示：（左图为灰度处理后的图片，右图为源图片展示）
注：测试需要在服务器中进行，本地测试会报错（如下图所示），原因是浏览器会追踪image data ，当你把一个跟Canvas域不同的图片放到Canvas上，这个Canvas就成为“tainted”（被污染的，脏的），浏览器就会禁止你操作该Canvas的任何像素（原问题链接：http://www.cnblogs.com/jdksummer/articles/2565998.html）。
--------------------------------------------------分割线-------------------------------------------------
图片颜色反转处理：
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function pageLoaded(){
var canvas=document.getElementById("myCanvas");
//源图片
var image=document.getElementById("imageSource");
var imageWidht=image.width;
var imageHeight=image.height;
canvas.width=imageWidht;
canvas.height=imageHeight;
var context=canvas.getContext("2d");
//绘制
context.drawImage(image,0,0);
//获取对象 指定矩形范围内的像素数据
var canvasData=context.getImageData(0,0,imageWidht,imageHeight);
/*canvasData.data为图片像素的二维数组
对于canvasData中每一个像素都包含四方面的信息：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
*/
for(var i=0;i<canvasData.data.length;i+=4){
canvasData.data[i]=255-canvasData.data[i];
canvasData.data[i+1]=255-canvasData.data[i+1];
canvasData.data[i+2]=255-canvasData.data[i+2];
canvasData.data[i+3]=255;
}
// 处理完成的数据重新载入到canvas二维对象中
context.putImageData(canvasData, 0, 0);
}
</script>
</head>
<body onload="pageLoaded();">
<canvas id="myCanvas" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<img id="imageSource" src="img/bbe.jpg" style="border:1px solid #c3c3c3;"></img>
</body>
</html>
显示效果如图所示：
