使用 Canvas 对图像进行处理

栏目: Html5 · 发布时间: 7年前

内容简介:使用 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

@三水清

感觉有用,欢迎关注我的公众号

使用 Canvas 对图像进行处理

以上所述就是小编给大家介绍的《使用 Canvas 对图像进行处理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Coding the Matrix

Coding the Matrix

Philip N. Klein / Newtonian Press / 2013-7-26 / $35.00

An engaging introduction to vectors and matrices and the algorithms that operate on them, intended for the student who knows how to program. Mathematical concepts and computational problems are motiva......一起来看看 《Coding the Matrix》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换