html2canvas配置项,html2canvas使⽤总结
话不多说，在实际项⽬中⽣成截图是很常见的需求，⽽⼀般的，我们都会选择使⽤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 => {
/
/ 返回图⽚的⼆进制数据
DataURL("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: *
重要的配置项，是跨域问题的根本源泉，需要后端配合svg canvas
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 了
不要问我是怎么知道的~~~