当前位置: 首页 > 工具软件 > html2canvas > 使用案例 >

html2canvas 配置项,html2canvas 使用总结

笪昌翰
2023-12-01

话不多说,在实际项目中生成截图是很常见的需求,而一般的,我们都会选择使用js库来自动生成(从头造轮子太难了...),比如今天的主角:html2canvas

使用

先来看下如何在 vue 项目中应用的

import html2canvas from "html2canvas";

// 生成快照

const convertToImage = (container, options = {}) => {

// 设置放大倍数

const scale = window.devicePixelRatio;

// 传入节点原始宽高

const width = container.offsetWidth;

const height = container.offsetHeight;

// html2canvas配置项

const ops = {

scale,

width,

height,

useCORS: true,

allowTaint: false,

...options

};

return html2canvas(container, ops).then(canvas => {

// 返回图片的二进制数据

return canvas.toDataURL("image/png");

});

}

// 调用函数,取到截图的二进制数据,对图片进行处理(保存本地、展示等)

const imgBlobData = await convertToImage(element);

仅此而已~~~

遇到的问题

如果只是这样就结束了,那这也太简单了吧,但是人无完人,再美的东西也会有瑕疵,下面列举一些 html2canvas 的问题及解决办法

1、图片跨域

解决方案:

设置配置项 allowTaint: false

canvas 的 CanvasRenderingContext2D 属于浏览器的对象,如果渲染过跨域资源,浏览器就认定 canvas 已经被污染了 Taint:污点

设置配置项 useCORS: false

表示允许跨域资源共享,注意不能与 allowTaint 同时配置为 true

img 标签中添加 crossOrigin = "anonymous"

anonymous:如果使用这个值的话就会在请求 header 中带上 Origin 属性,但请求不会带上 cookie 和客户端 ssl 证书等其他的一些认证信息

图片服务器配置 Access-Control-Allow-Origin: *

重要的配置项,是跨域问题的根本源泉,需要后端配合

2、截图锯齿

解决方案:根据设备像素比进行缩放

// 设置放大倍数

const scale = window.devicePixelRatio;

3、截图不全

解决方案:截图之前将页面滚动到顶部

document.body.scrollTop = document.documentElement.scrollTop = 0;

const imgBlobData = await convertToImage(element);

4、对 css3 支持不好

html2canvas 暂不支持的 CSS 样式属性:

background-blend-mode、background-clip: text、box-decoration-break、repeating-linear-gradient()、font-variant-ligatures、mix-blend-mode、writing-mode、writing-mode、border-image、box-shadow、filter、zoom、transform

解决方案:

对于一些必要的样式,可以选择使用图片做兜底实现

box-shadow 可以参考 这个pr,修改源码解决,但是,实际效果也不是太理想……

5、svg 标签

问题原因:vue-lottie 动画库渲染的标签是 svg(也可能是你自己写的 svg 标签)

html2canvas 对于 svg 标签的支持也不尽人意,解决办法同样是用图片做兜底

在项目中,我们是用 svg 做动画,截图的时候把动画换成一张静态图,这样只要设置要静态图的样式,截图效果还是可以接受的

6、其他

建议:在页面开发前尽量跟产品确认好这个页面到底要不要截图,如果需要截图,那么搬砖的时候就要注意不要使用以上 css3 特性了,否则,就后期就只能含着眼泪、咬着牙修 bug 了

不要问我是怎么知道的~~~

 类似资料: