利用HTML5中Canvas处理并存储图片

HTML5中增加的Canvas元素，配合JS灵活的语法，处理起图片变得异常简单，不需要在客户端用C/C++写一大堆代码，对于熟悉JS的程序员来说，只需要考虑处理图片的逻辑了。

canvas中如果想要处理图片就需要借助ImageData这个对象，就是将画布中某一区域中的图像以RGBA的方式保存下来，存成一个二维数组。

JavaScript代码复制内容到剪贴板

1. ctx.getImageData（X，Y，W，H）       / /获取的ImageData  
2. ctx.putImageData（X，Y，W，H）      / /将的ImageData绘在画布上  

写了个简单的处理图像的类，可以翻转/灰化/去色/高亮/设单色值

JavaScript代码复制内容到剪贴板

1. / **
2. * @作者诺里斯堂
3. * /  
4. 变种  PS =  功能（配置）{  
5. / / $扩展（这一点，配置）;  
6. 返回 此 ;  
7. }  
8. PS.prototype = {  
9. / /将图像灰化  
10. 灰色：  功能（CTX，为imageData）{  
11. 无功  W = imageData.width，  
12. H = imageData.height，  
13. RET = ctx.createImageData（W，H）;  
14. 对  （我= 0;我
15. {  
16. 为  （J = 0;Ĵ
17. {  
18. 无功  指数=（I *高+ J）* 4;  
19. 无功  红= imageData.data [指数];  
20. 变种  绿色= imageData.data [索引1];  
21. 无功  蓝色= imageData.data [索引2];  
22. 无功  字母= imageData.data [指数3];  
23. 变种  平均=（红+绿+蓝）/ 3;  
24. ret.data [索引] =平均值;  
25. ret.data [索引1] =平均值;  
26. ret.data [索引2] =平均值;