内容简介:使用 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-原色
。所以有了下面的方法:
-
function draw(img){
-
ctxt.clearRect(0, 0, 480, 480);
-
// console.log(img);
-
ctxt.putImageData(img,0,0);
-
}
-
function invert(){
-
var back = ctxt.createImageData(480, 480);
-
var arr = back.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];
-
arr[i] = 255-red;
-
arr[i+1] = 255-green;
-
arr[i+2] = 255-blue;
-
arr[i+3] = alpha;
-
}
-
return back;
-
}
-
//颜色反转
-
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 对图像进行处理
- 使用 Canvas 对图像进行处理
- 使用 Canvas 对图像进行处理
- 使用PyTorch进行图像风格转换
- Python进行基本图像数据分析!
- 教程:使用Python进行基本图像数据分析!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
写给大家看的设计书(第4版)
Robin Williams / 苏金国、李盼 / 人民邮电出版社 / 2016-1 / 59.00元
畅销设计入门书最新版,让每个人都能成为设计师 在这个创意无处不在的时代,越来越多的人成为设计师。简历、论文、PPT、个人主页、博客、活动海报、给客人的邮件、名片……,处处都在考验你的设计能力。 美术功课不好?没有艺术细胞?毫无设计经验? 没关系!在设计大师RobinWilliams看来,设计其实很简单。在这部畅销全球多年、影响了一代设计师的经典著作中,RobinWilliams将......一起来看看 《写给大家看的设计书(第4版)》 这本书的介绍吧!