图片灰度处理的两种方式

源码下载

一、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;
  }
}