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
回复
不错不错,正好用上