利用canvas实现图片色彩变换

canvas实现图片的变色效果

上一篇文章涉及到关于canvas的技术细节，开启了本人canvas的技术学习，这周介绍一个关于利用canvas实现图片滤镜。

相关技术点：

1.将图片绘制到canvas画布上。

涉及API :
ctx.drawImage(image,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);
参数介绍 ：
* image: 图片对象或者canvas对象，video对象。
* sx,sy: 源对象上需要截取的图像起始点x,y坐标。
* sWidth,sHeight：源对象上需要截取的图像的宽高。
* dx,dy: 需要绘制到画布上的起始点坐标。
* dWidth,dHeight: 需要绘制到画布上的图片的大小。

代码片段：
      var obj_img = new Image();
      obj_img.onload = function(){
          //绘制图片到画布，假设canvas的上下文为ctx
          ctx.drawImage(obj_img,sx,sy,sWidth,sHeight,dx,dy,dWidth,dHeight);  
      }
      obj_img.src = 'myFace.png';

2.取出canvas画布相关的img数据。

涉及API :
ctx.getImageData(x,y,width,height);
参数介绍 ：
* x,y: canvas画布的起始点x，y坐标。
* width,height：canvas画布需要截取的图像的宽高。

得到的结果是一个一维数组，包含每个像素点的RGBA的整型数据。

实现原理

我们通过将所要进行滤镜的图片进行载入，绘制到canvas上，然后获取图像数据，将canvas图像数据进行数值变换，将变换好的的数组赋值给原来的canvas对象的data。

tip:
一维数组的数据结构如图，数组中的元素代表不同的色值以及透明度。

实现代码如下，截图如下：

blur img

技术链接：

canvas实现图片的变色效果
实现原理

canvas实现图片的变色效果

实现原理

FEATURED TAGS