html2canvas对CSS3滤镜设置无效的替代方案

CSS3的来临,我们可以通过css对图像进行更多的处理,滤镜filter属性就可以对网页中的图像进行滤镜处理,比如透明度、灰度、反色、亮度、饱和度、褐色、模糊、色相翻转、对比度、阴影等等。但是很多很多场景下需要我们去截图,想必大家都会用到html2canvas。这时才发现截出来的图片中没有滤镜效果。

JavaScript
发布于 2019-07-21 阅读 1.6k

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

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截图设置的置灰效果就正常了。

  • 本文类型: 原创
  • 本文出处:
  • 版权说明: 本站内容均采用©BY-NC-SA许可协议,版权归作者和本站所有!欢迎转载,但未经作者同意必须在文章页面注明原文出处,否则保留追究法律责任的权利。
寒风
寒风 2021-01-13
回复
不错不错,正好用上

坤尘记

I AM KUNCHEN!思绪如风,总会在某处停留;用轻灵的文字书写关于技术生活的奇思妙想。

浙ICP备2020045526号