下面以置灰为例进行操作。

filter置灰实现

filter实现置灰效果，设置图像的颜色为黑白 (100% 灰度).

filter-gray {
  -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
  filter: grayscale(100%);
}

问题描述

使用html2canvas截图对置灰效果无效，输出还是原图。

解决方案

使用Html5 Canvas特效滤镜代理CSS3，主要思路就是设置获取图像的像素数据，重新设置每个像素点的RGB值。

获取DOM对象

const canvas = document.getElementById('myCanvas');

获取渲染上下文

canvas元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个上下文的格式的参数；获取之前首先判断canvas.getContext是否存在。

if (canvas.getContext) {
  let context = canvas.getContext("2d");
  const w = canvas.width;
  const h = canvas.height;
}

获取ImageData对象

ImageData对象中存储着canvas对象真实的像素数据，为了获得一个canvas像素数据的ImageData对像，我们可以用getImageData()方法。

let canvasData = context.getImageData(0, 0, w, h);

像素点灰度设置

for (let x = 0; x < canvasData.width; x++) {
  for (let y = 0; y < canvasData.height; y++) {
    let idx = (x + y * canvasData.width) * 4;
    let r = canvasData.data[idx + 0];
    let g = canvasData.data[idx + 1];
    let b = canvasData.data[idx + 2];
    let gray = 0.299 * r + 0.587 * g + 0.114 * b;
    canvasData.data[idx + 0] = gray;
    canvasData.data[idx + 1] = gray;
    canvasData.data[idx + 2] = gray;
  }
}

重新渲染canvas

context.putImageData(canvasData, 0, 0);

然后再使用html2canvas截图设置的置灰效果就正常了。