话不多说，在实际项目中生成截图是很常见的需求，而一般的，我们都会选择使用js库来自动生成（从头造轮子太难了...），比如今天的主角：html2canvas
使用
先来看下如何在 vue 项目中应用的
import html2canvas from "html2canvas";
// 生成快照
const convertToImage = (container, options = {}) => {
// 设置放大倍数
const scale = window.devicePixelRatio;
// 传入节点原始宽高
const _width = container.offsetWidth;
const _height = container.offsetHeight;
let { width, height } = options;
width = width || _width;
height = height || _height;
// 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: falsecanvas 的 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 了
不要问我是怎么知道的~~~
