1、版本使用1.0.0-rc.4
,能兼容ios13
2、不使用背景图,使用<img />
,并且添加cssdisplay:block
3、如果有图片,用load
方法判断等图片加载完再截图
<img @load="getImgLoad" src="" alt="" class="">
4、不能通过css实现多行文本加省略号。可以使用js实现
this.showLoading = true
const targetDom = document.getElementById('canvas');
html2canvas(targetDom, {
width: targetDom.offsetWidth, //解决部分手机生成图片出现白边问题
height: targetDom.offsetHeight, //解决部分手机出现白边问题
useCORS: true, //开启跨域
x: 0, // 解决页面有滚动条时会生成空白
y: document.getElementById("canvas").offsetTop, // 解决页面有滚动条时会生成空白
scrollY: 0, // 解决页面有滚动条时会生成空白
scrollX: 0, // 解决页面有滚动条时会生成空白
}).then(canvasData => {
let base64 = canvasData.toDataURL('image/png');
this.imgDataURL = base64
this.showLoading = false
}).catch((err) => {
Toast('生成图片失败!请重试');
});