使用 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 对图像进行处理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

共鸣:内容运营方法论

共鸣:内容运营方法论

舒扬 / 机械工业出版社 / 2017-5-8 / 59.00

近5年来网络信息量增长了近10倍,信息极度过剩。移动互联网以碎片化、强黏度以及惊人的覆盖率给传统的商业环境带来了巨大的影响,向陈旧的广告、公关、媒体行业展开了深度的冲击。 传统的以渠道为中心的传播思想几近失效,优秀内容成为了各行业最稀缺的资产,这是时代赋予内容生产者的巨大机会。本书作者在多年经验和大量案例研究的基础上,总结出了移动互联网时代的内容运营方法论——共鸣,它将告诉我们如何收获核心粉......一起来看看 《共鸣:内容运营方法论》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器