一、关于html2canvas
介绍
html2canvas网址为：https://html2canvas.hertzen.com/documentation
脚本遍历加载页面的DOM元素的信息，然后将其用于构建页面的表示形式。换句话说，它实际上并不截取页面的屏幕截图，而是根据它从DOM读取的属性来构建页面的表示形式。
结果，它只能正确呈现它理解的属性，这意味着有许多CSS属性无效，受支持的CSS。
局限性
脚本使用的所有图片都必须位于相同的来源， 以便它无需代理即可读取它们。同样，如果canvas 页面上还有其他元素被跨域内容污染，它们将变脏并且无法被html2canvas读取。
浏览器兼容性
二、需求场景
业务需要前端页面内容生成特定的海报图片，然后分享到第三方供人浏览和传播。
三、在vue项目中的使用
1. 安装html2canvas
npm install --save html2canvas
2. 按需引入
在需要使用的页面中先引入html2canvas
import html2canvas from 'html2canvas'
3.在template模板中
配置要截图的内容，在截屏容器（最外层的元素）设置属性ref="imageTofile"，把要合成图片的内容都放进这个元素内部中。
<template>
<!-- 把要截图的元素放在一个元素里,设置一个ref -->
<section class="image_tofile" ref="imageTofile">
<!-- 元素内部放置要合成图片的内容 -->
<img class="poster-img" :src="personalBill" alt="">
<p class="poster-text">注意元素的样式，有些样式不能被截屏</p>
<p class="poster-text">不要用背景图片，用img标签防止截图模糊</p>
</section>
</template>
4.在js中的配置
toImage方法实现html中的元素转换成图片,得到为base64格式的图片。
methods: {
// 页面元素转图片
toImage() {
// 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
return html2canvas(this.$refs.imageTofile, {
backgroundColor: null, // 背景颜色
dpi: 192, // 将分辨率提高到特定的dpi,默认值为96
scale: 2, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
useCORS:true, // 是否尝试使用CORS从服务器加载图像
}).then((canvas) => {
this.posterUrl = canvas.toDataURL('image/png')
})
},
},
这时得到的图片是个base64格式的字符，根据业务场景的需要进行后续的处理就可以了。
四、使用中遇到的问题
1.截图不全
(1)、当合成图片的元素过多的时候，调用toImage时，有可能元素还未加载或渲染完成，会造成截屏内容不全。
// 可以利用延时
setTimeout(() => {
this.toImage()
}, 10)
(2)、页面滑动造成的，当html2canvas进行截图时，若内容高度高于body（或者说是屏幕视口）时，就会出现。
// 1、在生成截图前，先把滚动条置顶
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
// 2、或者让合成图片的部分元素从顶部往下正常排版，然后不让其内容滚动。
// 一般在使用时，如果合成部分内容简单，可以自己写好要合成的样式，调整元素层级，使其隐藏在页面不可见即可。
2.截图部分白屏或黑屏
这种情况的出现有可能是因为合成图片内的元素有跨域的资源，就会造成这种情况出现，导致合成失败。
html2canvas中配置 allowTaint:true 或 useCORS:true（我用的useCORS:true）
跨域资源图片服务器配置Access-Control-Allow-Origin 或使用代理，
（通过后台小伙伴配置了图片所在服务器的响应头信息，所以本人没有用到代理的方式来处理）
3.截图后图片模糊
// html2canvas中配置两个配置项,`scale`和`dpi`，经测试使用如下参数即可
dpi: 192, // 将分辨率提高到特定的dpi,默认值为96
scale: 2, // 用于渲染的比例尺。默认为浏览器设备像素比率。默认值是1，手机端设置成2
// 还有一点就是当合成元素中有背景图片的部分，都换成用img标签代替，否则合成出来的截图即使加上了上边的参数，也会模糊。
