话不多说，在实际项目中生成截图是很常见的需求，而一般的，我们都会选择使用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 了

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