html2canvas踩坑记

之前我们有toB的海报截屏需求，都使用了node截图，最近有toC的需求，访问量大，用node直接挂了，调研了下改成html2canvas，结果入坑一时爽，填坑火葬场。记录下，希望可以帮助出现同样问题的坑主！官方地址：http://html2canvas.hertzen.com/

问题1：没法截取阴影
解决：我页面的阴影可以用层叠div取代，所以没有改源代码，可以看下面这个链接的解决方法。https://blog.csdn.net/SDUST_JSJ/article/details/78122610

问题2：截屏底部出现1px的白边
解决：动态设置了height为截屏内容的高度，但是偶有机型还是会出现，最终解决方法，height设置比实际小1px即可；

问题3: 截屏不清晰问题
解决：设置scal:3,非常清晰 问题4、图片跨域问题 设置useCORS: true

问题4: ios13.+ iphone8会出现html2canvas()不执行不报错，then和catch都不执行，直接中断的问题。
回退版本到1.0.0-rc4.如果回退还不可以，可以参考https://github.com/FEA-Dven/html2Canvas
代码：
let html2canvas;
if (IS_CLIENT) {
html2canvas = require('html2canvas/dist/html2canvas');
}
const targetDom = document.querySelector('.poster');
(window.html2canvas || html2canvas)(targetDom, {
useCORS: true,
scale: 3,
height: targetDom.offsetHeight - 2,
width: targetDom.offsetWidth,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
}).then((canvas) => {
const base64Img = canvas.toDataURL('image/png');
const img = base64Img.replace(/^data:image/\w+;base64,/, '');
this.props.base64Func && this.props.base64Func(img);
}).catch(err => console.log(err));