html2canvas截图不完整

Question

问题描述

最近需要做一个分享功能，原生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
})

Answer 1

我也遇到了类似问题。 在某些低版本手机上，图片以路径形式存在时，可以转换成功。可是图片以base64形式存在时，转换后图片就没了。
你看看你的这个地方，有些图片显示出来了，有些却没有。 应该是webpack自动将小图片转换成了base64，所以没显示出来。你可以在webpack中进行相关配置

Answer 2

尝试截取放到 onload里边执行，确认所截图片加载完毕

img.onload= function(){

}

Answer 3

你好，请问问题解决了吗？我也遇到类型的问题了，pc上没问题，到了手机就截不全