Skip to main content

html2canvas截图白屏，图片偏移终极解决方案

· 2 min read

需求场景​

需要实现活动页面，点击分享弹出海报图片，并长按保存

图片偏移原因一：滚动条相关​

html2canvas 的参数中，有 2 个参数，x,y。是裁剪位置的 x,y 坐标。x 方向一般没有滚动条，问题不大，y 方向一般是有滚动条的，这个时候就要算上滚动条偏移的距离才可以。

图片偏移原因二：transform 属性​

解决掉滚动条导致的偏移问题后，ios 下截图没有偏移问题了，但是安卓会出现。经过多次调试及搜索相关资料，终于发现是因为弹窗使用了 transform 属性。后来去掉 transform 使用 flex 解决了。

截图空白原因三：图片未加载完成就调用 html2canvas​

这个问题也是显而易见的，图片还没加载好就截图，肯定会出现问题。

其他问题：图片跨域​

需要使用 useCORS 属性，并且服务器开启 Access-Control-Allow-Origin : *，当然也可以使用代理方式

终极解决方案代码​

const sharePosterImg = ref("");

// 等待海报中的图片加载完成
await loadImage(needLoadImg);
// vue等待页面渲染完成
nextTick(() => {
  const sharePoster = document.getElementById("share-poster");
  //计算图片宽高，偏移距离，滚动条偏移距离
  html2canvas(sharePoster, {
    //允许跨域
    useCORS: true,
    scale: 2,
    width: sharePoster.offsetWidth,
    height: sharePoster.offsetHeight,
    x: sharePoster.getBoundingClientRect().left,
    //需要加上滚动条偏移距离
    y: window.pageYOffset + sharePoster.getBoundingClientRect().top,
  }).then((canvas) => {
    //赋值base64
    sharePosterImg.value = canvas.toDataURL("image/png");
  });
});