使用 canvas 对图像进行处理

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

内容简介:使用 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数组是每四个数组值代表一个像素点。这样一来,一个图像就转化成了数据表示的数组。如下面的代码:

var canvas = document.getElementById('canvas');
var ctxt = canvas.getContext('2d');
var img = new Image;
img.onload = function(){
ctxt.drawImage(img, 0, 0);
var data = ctxt.getImageData(0, 0, 480, 480).data;
console.log(data, data.toString());
}
img.src = 'img/pic.jpg';

这里需要注意,图片src符合同源策略,即不可以跨域请求。

图像数组的遍历

如上面的代码,我们可以看到数组data就是图片转换成的数组,那么遍历这个数组就可以取得图片的像素点内容:

var data = ctxt.getImageData(0, 0, 480, 480).data;
for(var i =0,len = data.length; i<len;i+=4){
var red = data[i],
green = data[i+1],
blue = data[i+2],
alpha = data[i+3];
}

图片颜色反转

颜色反转的算法就是三原色求反,即 255-原色 。所以有了下面的方法:

  1. function draw(img){

  2. ctxt.clearRect(0, 0, 480, 480);

  3. // console.log(img);

  4. ctxt.putImageData(img,0,0);

  5. }

  6. function invert(){

  7. var back = ctxt.createImageData(480, 480);

  8. var arr = back.data;

  9. for(var i=0,len = data.length;i<len;i+=4){

  10. var red = data[i],

  11. green = data[i+1],

  12. blue = data[i+2],

  13. alpha = data[i+3];

  14. arr[i] = 255-red;

  15. arr[i+1] = 255-green;

  16. arr[i+2] = 255-blue;

  17. arr[i+3] = alpha;

  18. }

  19. return back;

  20. }

  21. //颜色反转

  22. draw(invert());

颜色一些算法

去色

把图片变成黑白图,只要把每个像素的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

@三水清

掘金更新比公众号晚一周左右。

感觉有用,欢迎关注我的公众号,最新文章第一时间看到!

使用 canvas 对图像进行处理

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

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

数据密集型应用系统设计

数据密集型应用系统设计

Martin Kleppmann / 赵军平、李三平、吕云松、耿煜 / 中国电力出版社 / 2018-9-1 / 128

全书分为三大部分: 第一部分,主要讨论有关增强数据密集型应用系统所需的若干基本原则。首先开篇第1章即瞄准目标:可靠性、可扩展性与可维护性,如何认识这些问题以及如何达成目标。第2章我们比较了多种不同的数据模型和查询语言,讨论各自的适用场景。接下来第3章主要针对存储引擎,即数据库是如何安排磁盘结构从而提高检索效率。第4章转向数据编码(序列化)方面,包括常见模式的演化历程。 第二部分,我们将......一起来看看 《数据密集型应用系统设计》 这本书的介绍吧!

MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具