有时候在一些特殊的日子，如重大事故，国家公祭日等，需要将网页设置为灰色。在html中我们可以直接用filter: grayscale(1)来实现，效果如下：

原理

canvas中实现灰色滤镜核心API是getImageData、putImageData，通过灰色算法将imageData的像素数据进行处理，步骤如下：

使用ctx.getImageData(0, 0, 200, 200)获取指定区域像素内容。
对imageData.data中的每个像素通过灰度算法进行处理。
使用ctx.putImageData(imageData, 0, 0)绘制处理后的数据。在线demo预览

代码

//灰度算法
//Gray = (R*30 + G*59 + B*11 + 50) / 100
//Gray = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
function grayscale(imageData) {
    let data = imageData.data
    let len = data.length;
    let brightness
    for (i = 0; i < len; i += 4) {
        // brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
        //brightness = 0.299 * data[i] +0.587 * data[i + 1] + 0.114 * data[i + 2];
        brightness = (30 * data[i] + 59 * data[i + 1] + 11 * data[i + 2]) / 100;
        // red
        data[i] = brightness;
        // green
        data[i + 1] = brightness;
        // blue
        data[i + 2] = brightness;
    }
}

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.clearRect(0, 0, 400, 200)
let img = new Image()
img.onload = () => {
  ctx.drawImage(img, 0, 0, 200, 200)
  let imageData = ctx.getImageData(0, 0, 200, 200)
  grayscale(imageData)
  ctx.clearRect(0,0,200,200)
  ctx.putImageData(imageData, 0, 0)
}
img.src = "1.jpeg"

Canvas实现灰色滤镜grayscale

原理

代码