html2canvasheight无效,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));