清明节黑白效果清明节黑白效果=>来聊聊色彩矩阵算法来聊聊色彩矩阵算法
昨天各大平台收到通知，需要首页以黑白效果来展示，高级浏览器有一个简单的属性，全局设置一下，就可以满足：
-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页未读，继续阅读
资源评论
