canvas像素操作之图片滤镜（5）
2019-10-14 本文已影响0人
_南宫逸轩
原图
滤镜之后的图：
滤镜图
实现原理：
这里面用到了canvas的一个方法：getImageData,这个方法可以获得图片的像素信息
**CanvasRenderingContext2D**.getImageData()返回一个ImageData对象，用来描述canvas区域隐含的像素数据，这个区域通过矩形表示，起始点为(sx, sy)、宽为sw、高为sh。
我们需要用到里面的返回对象的data属性，data里面是一个大数组，包含每一个像素的信息，其中，一个像素用4个比特位表示，也就是4位组成一个像素，分别是rgba，r：0~255，g：0~255，b：0~255，a：0~255,alpha通道一般是0~1，但是他这里也用0~255表示是为了方便。
举个例子：比如原图的第一个像素rgba是0，17，43，0，对应的就是data[0]=0,data[1]=17,data[2]=43,data[4]=255,第二个像素同理，以此类推。
好，那么如果我们得到了这些像素的值要实现滤镜操作无非是修改这些像素的值，比如让图片泛黄，那就不要rgba中b的值。
为了用户安全的考虑，getImageData不能读取本地的图片，只能读取服务端的文件,服务端我们用wamp（把你的html文件和图片文件放在安装好的wamp文件的www目录下，本地游览器地址栏输入localhost/你的目录/文件名.html）就可以访问了
<canvas width="800" height="600" style="background:white;"></canvas>
新建一个图片对象：
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';
图片加载完之后开始画图：
img.onload=function(){
gd.drawImage(img,-500,0);
}
获取imageData对象：
let imgArr=gd.getImageData(0,0,c1.width,c1.height);
把rgba中的b全部变为50：
for(let r=0;r<c1.height;r++){
for(let c=0;c<c1.width;c++){
imgArr.data[4*(r*c1.width+c)+2]=50;
}
}
imgArr.data[4*(r*c1.width+c)+2]=50;
这句话的意思是把每一个像素的b（blue）的值都变为50，应为一个像素有4位，每一行*画布的宽+有多少列+2就是每个像素的b的值；
更新完后还需要设置回去：
gd.putImageData(imgArr,0,0);
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
background: gray;
text-align: center;
}
</style>
<script>
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let img=new Image();
img.src='images/1.jpg';
img.onload=function(){
gd.drawImage(img,-500,0);
let imgArr=gd.getImageData(0,0,c1.width,c1.height);
for(let r=0;r<c1.height;r++){
for(let c=0;c<c1.width;c++){
imgArr.data[4*(r*c1.width+c)+2]=50;
}
}
gd.putImageData(imgArr,0,0);
}
}
</script>
</head>
<body>
<canvas width="800" height="600" style="background:white;"></canvas>
</body>
</html>
