html2canvas截图不完整
问题描述
最近需要做一个分享功能,原生app嵌入h5页面,截取当前页面作为分享封面。
使用到了html2canvas,在电脑模拟器截图没有问题,在真机上只能截取一部分
相关图片
- 原页面
- 使用pc模拟器
- 真机
问题出现的环境背景及自己尝试过哪些方法
在网上搜了半天,可能是布局使用定位的原因,但即使不用定位,也是不完整
相关代码
const dom = this.$refs.container
html2canvas(dom, {
useCORS: true,
foreignObjectRendering: true
}).then(canvas => {
const base64 = canvas.toDataURL('image/jpeg')
// upload base64 ... return url
})
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
尝试截取放到 onload里边执行,确认所截图片加载完毕
img.onload= function(){
}
你好,请问问题解决了吗?我也遇到类型的问题了,pc上没问题,到了手机就截不全
我也遇到了类似问题。 在某些低版本手机上,图片以路径形式存在时,可以转换成功。可是图片以base64形式存在时,转换后图片就没了。
你看看你的这个地方,有些图片显示出来了,有些却没有。 应该是webpack自动将小图片转换成了base64,所以没显示出来。你可以在webpack中进行相关配置