最近项目中需要在报告最终页生成海使得用户长按屏幕生成海报 海报中附带二维码可以提供扫描,由于项目比较着急，直接就进入了开发，然后最终页海报部分使用了html2canvas，这里面写一下自己的使用心得
官网链接附上： github.com/niklasvh/ht…
NPM安装命令：npm install --save html2canvas
YARN安装命令：yarn add html2canvas
官网ISSUES ：github.com/niklasvh/ht…
可以试试domtoimage： juejin.cn/post/684490…
随便列出几个来吧...
- 旋转无法正常工作
- IE 11 html2canvas中没有图标
- html2canvas使文本变小
- 无法打印svg。
- 当多个div具有相同的z-index堆叠时，无法呈现正确的内容
- ios webview中带有图像的屏幕截图为白色。
- 还有很多坑 随手 Google一下遍地都是....
Vue中使用方法【结合二维码使用，一定要做延迟处理，确保二维码生成后才生成海报页面】
大致页面结构如下
<div
id="capture_box"
ref="capture"
class="report_box"
style="position: relative;width: 100%;height: 100%;"
>
...
<div
class="qrcodes_content"
style="width: 90px;height:90px;padding:10px;box-sizing: border-box;"
>
<div class="qrcodes" ref="qrcodes"></div>
</div>
...
</div>
<div class="capture_shot">
<img :src="image" />
</div>
import QRCode from "qrcodejs2";
import html2canvas from "html2canvas";
savaImage() {
const that = this;
const opts = {
scale: 2, //图片清晰度的保证
useCORS: true //允许图片跨域，一定要开启
};
html2canvas(this.$refs.capture, opts).then(canvas => {
const dataURL = canvas.toDataURL(); //将canvas 转为img标签需要的src流
that.image = dataURL;
});
},
//以下为二维码的生成方式。 利用的是
getQrCode() {
const qrcode = new QRCode(this.$refs.qrcodes, {
text: this.url,
width: 70, //二维码的宽度，这种设置的方式是px 不会像rem这种会根据屏幕大小像素变化
height: 70, //同上
colorDark: "#000000", //设置二维码的图案的颜色
colorLight: "#ffffff" //设置二维码的图案的颜色
});
setTimeout(() => {
this.savaImage();
}, 500);
}
踩坑过程
生成的二维码无法扫描但是长按会提示扫描图中二维码
当生成二维码的链接比较长或者比较复杂时将，生成的二维码比较密集，二维码设置较小时，部分手机型号会需要扫描半天或者大概率无法识别。
办法就是将二维码外面套一层div标签设置白色背景，然后将二维码居中，切记div的元素的样式为行内样式，因为二维码的原因。
生成的图片为空data:;
原因是dom元素中设置背景图的原因。我将背景图用img 标签代替就好了。
html2canvas 截图跨域
useCORS:true 这个参数很重要，没有配置的话，依旧是不能解决问题的；
根据现有的解决方案大致有两种：
在跨域的服务器上设置header设置为允许跨域请求。 在服务器上设置header设置允许跨域请求（采用nginx做静态资源映射
借助代理脚本获得外域图片的 base64 编码后的字符串
生成的图片模糊不清且有锯齿瑕疵怎么办?
html2canvas(document.querySelector("#capture"),{
scale: 2
}).then(canvas => {
document.body.appendChild(canvas)
});
（1）使用 scale 属性可以修改渲染时的放大倍数（默认为 1），将其调大可以解决低分辨率设备下生成的图片模糊问题。
（2）下面是当 scale 设置为2时，生成的图片。
安卓版微信保存图片失败的问题
canvas2img默认保存图片的格式为png，而在安卓版微信中所生成的图片尽管能长按唤出保存图片的菜单，但是无法正确保存到本地相册。 解决方案：设置canvas2img的生成图片格式配置项为jpeg即可。
