canvas如何通过像素处理实现反色、黑白等美颜效果

这篇文章主要介绍了canvas如何通过像素处理实现反色、黑白等美颜效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专注于企业成都全网营销推广、网站重做改版、石楼网站定制设计、自适应品牌网站建设、H5技术、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为石楼等各大城市提供网站开发制作服务。

getImageData：获取一张图片的像素数据

cxt.getImageData( x, y, width, height )

x：图片所在的x坐标

y: 图片所在的y坐标

width,height 要获取的像素区域

返回值是一个对象，对象包括一个data属性， 宽度，高度. data属性是一个巨大的数组，数组中存储的是这张图片的所有像素信息，每四个一组组成一个像素点的信息，如：

[r1,g1,b1,a1, r2,g2,b2,a2...]， r( 红色) g( 绿色) b( 蓝色 ) a( 透明度 )

putImageData：输出像素图片

putImageData( 像素对象, x, y )

注意：getImageData会产生跨域问题，所以你的程序要放在web服务器下，我这里是放在phpstudy下面.

1

2

3

4     

5     

10     

24

25

26     

27

28

我这张图片的尺寸是200 x 200.

一：反色效果

算法：把每一个像素的r, g, b颜色取反就行，也就是( 255 - 原来的值 )

1

2

3

4     

5     

10     

31

32

33     

34

35

二、黑白效果（灰度图）

将彩色图片转换成黑白图片，原理：求r(data[i]), g(data[i+1]), b(data[i+2])三个通道的平均值，然后把这个平均值赋值给r, g, b

1

2

3

4     

5     

10     

32

33

34     

35

36

也可以分配rgb的灰度比例

1

2

3

4     

5     

10     

32

33

34     

35

36

三、调节亮度的强弱

在r、g、b、通道上加上一正值就是变亮，加上负值就是变暗

1 var oImg = new Image();

2 oImg.src = '';

3 oImg.onload = function () {

4     oGc.drawImage(oImg, 10, 10);

5     var imgData = oGc.getImageData(10, 10, 200, 200),

6         data = imgData.data, avg = 0;

7     for( var i = 0; i < data.length; i += 4 ) {

8         data[i] += 30;

9         data[i+1] += 50;

10         data[i+2] += 50;

11     }

12     //处理完之后，再次输出

13     oGc.putImageData( imgData, 220, 10 );

14 }

变暗：

data[i] -= 30;

data[i+1] -= 50;

data[i+2] -= 50;

四、复古效果

将r, g, b按比例混合相加。

1 var oImg = new Image();

2 oImg.src = '';

3 oImg.onload = function () {

4     oGc.drawImage(oImg, 10, 10);

5     var imgData = oGc.getImageData(10, 10, 200, 200),

6         data = imgData.data, avg = 0;

7     for( var i = 0; i < data.length; i += 4 ) {

8         r = data[i];

9         g = data[i+1];

10         b = data[i+2];

11         data[i] = r * 0.3 + g * 0.4 + b * 0.3;

12         data[i+1] = r * 0.2 + g * 0.6 + b * 0.2;

13         data[i+2] = r * 0.4 + g * 0.3 + b * 0.3;

14     }

15     //处理完之后，再次输出

16     oGc.putImageData( imgData, 220, 10 );

17 }

五、蓝色蒙版

蓝色 蒙版就是让图片偏蓝色，将蓝色通道赋值为 r, g, b三原色的平均值，把绿色，红色通道设置为0，其他蒙版效果，只要设置对应的通道平均值，关闭其他通道即可.

1 var oImg = new Image();

2 oImg.src = '';

3 oImg.onload = function () {

4     oGc.drawImage(oImg, 10, 10);

5     var imgData = oGc.getImageData(10, 10, 200, 200),

6         data = imgData.data, avg = 0;

7     for( var i = 0; i < data.length; i += 4 ) {

8         avg = ( data[i] + data[i+1] + data[i+2] / 3 );

9         data[i] = 0;

10         data[i+1] = 0;

11         data[i+2] = avg;

12     }

13     //处理完之后，再次输出

14     oGc.putImageData( imgData, 220, 10 );

15 }

六、透明度

这个很简单，只要把透明度乘以一个0~1之间的值即可。跟css的opacity一样

1 var oImg = new Image();

2 oImg.src = '';

3 oImg.onload = function () {

4     oGc.drawImage(oImg, 10, 10);

5     var imgData = oGc.getImageData(10, 10, 200, 200),

6         data = imgData.data, avg = 0;

7     for( var i = 0; i < data.length; i += 4 ) {

8         data[i+3] *= 0.2;

9     }

10     //处理完之后，再次输出

11     oGc.putImageData( imgData, 220, 10 );

12 }

七、createImageData：根据图片或者某个宽度与高度创建一个像素区域

cxt.createImageData( w, h )

cxt.createImageData( imgData )

w, h:创建区域的宽度与高度

imgData: 创建的区域与这个像素区域的宽度和高度相同，imgData就是通过getImageData获取到图片像素的 返回值

1，根据一个图片的宽度与高度，创建一个透明的红色像素区域

1

2

3

4     

5     

10     

34

35

36     

37

38

2，自定一个200 x 200的蓝色透明像素区域

1

2

3

4     

5     

10     

26

27

28     

29

30

感谢你能够认真阅读完这篇文章，希望小编分享的“canvas如何通过像素处理实现反色、黑白等美颜效果”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!