一、css样式处理
缺陷:存在兼容性问题
.el-image--gray > img {
filter: grayscale(100%);
}
二、通过canvas处理图片的rgb数值
实现方式:通过canvas对象获取图片的rgb像素值,通过循环重新设置rgb的像素值,最后生成url
核心源码如下:
// 获取图片的rgb数据
const c = context.getImageData(0, 0, width, height)
// 进行 rgb数据的处理
for (var i = 0; i < c.height; i++) {
for (var j = 0; j < c.width; j++) {
var x = (i * 4) * c.width + (j * 4);
var r = c.data[x];
var g = c.data[x + 1];
var b = c.data[x + 2];
var gr = r * 0.299 + g * 0.578 + b * 0.114
c.data[x] = gr
c.data[x + 1] = gr
c.data[x + 2] = gr // (r + g + b) / 3;
}
}