清明节黑白效果=>来聊聊色彩矩阵算法资源-CSDN文库

78 浏览量 2021-01-08 12:09:51 上传评论收藏 427KB PDF 举报

资源推荐

资源详情

资源评论

清明节黑白效果清明节黑白效果=>来聊聊色彩矩阵算法来聊聊色彩矩阵算法

昨天各大平台收到通知，需要首页以黑白效果来展示，高级浏览器有一个简单的属性，全局设置一下，就可以满足：

-webkit-filter: grayscale(100%);filter: grayscale(100%);

在低级浏览器可以借助第三方插件来实现，比如说grayscale.js这种。

这种插件的原理，简单来说就是递归DOM结构，判断节点的类型，如果是文本直接更改其颜色值，如果是图片，通过canvas

来更改颜色值。

如何改变图片的颜色呢，就是今天咱们来聊的色彩矩阵。

其实就是把每个像素值跟多维矩阵乘一下就得到一个新的像素值(rgba)(底部有封装好的初始矩阵通道)

matrix!:Array = [];

RGBA = [ R, G, B, A ]

matrix =[ 1, 0, 0, 0, 0,

0, 1, 0, 0, 0,

0, 0, 1, 0, 0,

0, 0, 0, 1, 0 ] //原始通道

新的颜色信息 = RGBA * matrix = [

matrix[0]*R + matrix[1]*G + matrix[2]*B + matrix[3]*A + matrix[4] // R通道

matrix[5]*R + matrix[6]*G + matrix[7]*B + matrix[8]*A + matrix[9] // G通道

matrix[10]*R + matrix[11]*G + matrix[12]*B + matrix[13]*A + matrix[14] // B通道

matrix[15]*R + matrix[16]*G + matrix[17]*B + matrix[18]*A + matrix[19] // A通道

]

matrix由 20 个项目组成的数组，适用于 4 x 5 颜色转换。

red通道的值：（1，0，0，0，0）表示，R通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜

色），色彩偏移量off是0；

green通道的值：（0, 1, 0, 0, 0）表示，G通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜

色），色彩偏移量off是0；

blue通道的值：（0, 0, 1, 0, 0）表示，B通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜

色），色彩偏移量off是0；

alpha通道的值：（0, 0, 0, 1, 0）表示，A通道的乘数是1（完全保留），别的道道的的乘数是0，（不加入别的通道的颜

色），色彩偏移量off是0；

4 x 5 4行5列我们已经知晓其4列(RGBA),至于第5列(简称N)是颜色亮度的调节:

1,0,0,0,N

0,1,0,0,N

0,0,1,0,N

0,0,0,1,0

N=>亮度取值范围-255到255,只需要设置一下RGB的色彩偏移就能调节其亮度

举例说明：如果想要一个值为 rgba(200, 100, 50, 1 ) 的颜色，只保留红色通道的色彩。我们只需要调整 matrix 并做如下运算:

[ 200, 100, 50, 1 ] * [ 1, 0, 0, 0, 0,

0, 0, 0, 0, 0,

0, 0, 0, 0, 0,

0, 0, 0, 1, 0 ] = [

1*200 + 0*100 + 0*50 + 0*1 + 0,

0*200 + 0*100 + 0*50 + 0*1 +0,

0*200 + 0*100 + 0*50 + 0*1 +0,

0*200 + 0*100 + 0*50 + 1*1 +0,

] = [ 200, 0, 0, 1 ]

颜色反转

[ 200, 100, 50, 1 ] * [ -1, 0, 0, 0, 255,

剩余6页未读，继续阅读

内容反馈

weixin_38554186

粉丝: 0
资源: 955

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip