内容简介：使用 Canvas 对图像进行处理
今晚本来想发「hybrid系列的jssdk文章」，但是被耽搁了，只写了一半，还没有完成。昨天朋友问js处理图片的问题，想起之前写过一篇canvas处理图片的文章，于是整理发了出来。下周文章预告：「hybrid系列的jssdk文章」
html5 canvas图像转换成数组
html5的canvas可以进行图片处理，图片是由像素组成的。我们知道canvas有方法 getImageData ，返回的对象中可以取出，image的data 数组（类似数组的Type Array类型数组， Uint8ClampedArray ）。
假设canvas宽高是500*400，那么应该有200000个像素点，而通过 getImageData().data 获取的data数组的 length 是800000。
我们还知道rgba表示颜色的方法：
-
r=red，0~255
-
g=green，0~255
-
b=blue，0~255
-
a=alpha，0~100
即红绿蓝三原色和透明值 。
所以这个data数组是每四个数组值代表一个像素点。这样一来，一个图像就转化成了数据表示的数组。如下面的代码：
这里需要注意，图片src符合同源策略，即不可以跨域请求。
图像数组的遍历
如上面的代码，我们可以看到数组data就是图片转换成的数组，那么遍历这个数组就可以取得图片的像素点内容：
图片颜色反转
颜色反转的算法就是三原色求反，即 255-原色 。所以有了下面的方法：
颜色一些算法
去色
把图片变成黑白图，只要把每个像素的R、G、B设为亮度（Y）的值就行了。
关于R、G、B、Y的关系可以看到这里看看，这里只要记住这条公式： Y = 0.299R + 0.587G + 0.114B ，使用位： (R* 4899 + G * 9617 + B* 1868 + 8192) >> 14 ，速度会快
反相（反转）
就是将一个颜色换成它的补色。
补色就是用255（8位通道模式下，255即2的8次方，16位要用65535去减，即2的16次方）减去它本身得到的值： R(补) = 255 – R 。
其他算法需要基色和混合色配合可以参考：http://wenku.baidu.com/view/275f9c4769eae009581bec56.html
EOF
@三水清
感觉有用，欢迎关注我的公众号
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
