之前我们有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));