html2canvas 用法及踩坑实录

html2canvas 用法及踩坑实录

html2canvas 用法及踩坑实录

什么是 html2canvs?

html2canvas 的作用就是允许让我们直接在用户浏览器上拍摄网页或其部分的“截图”。

它的屏幕截图是基于 DOM 的,因此可能不会 100% 精确到真实的表示,因为它不会生成实际的屏幕截图,而是基于页面上可用的信息构建屏幕截图。

html2canvas 可以用来做什么

从上的面的介绍可以知道, html2canvas 的作用就是根据 DOM 生成对应的图片,所以一个比较常见的应用场景就是我们可以使用它在 H5 端生成分享图。

如何使用 html2canvas

let html2canvas = null;

export default {
  beforeMount() {
    import('html2canvas').then((plugin) => {
      html2canvas = plugin.default;
    });
  },
  methods: {
    // 获取分享图片 base64
    getShareImgBase64() {
      return new Promise((resolve) => {
        setTimeout(() => {
          // #capture 就是我们要获取截图对应的 DOM 元素选择器
          html2canvas(document.querySelector('#capture'), {
            useCORS: true, // 【重要】开启跨域配置
            scale: window.devicePixelRatio < 3 ? window.devicePixelRatio : 2,
            allowTaint: true, // 允许跨域图片
          }).then((canvas) => {
            const imgData = canvas.toDataURL('image/jpeg', 1.0);
            resolve(imgData);
          });
        }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成
      });
    },
  },
};
复制代码

常见问题总结

图片跨域

我们在进行图片保存的时候经常会发现图片跨域了

image.png

这个时候我们去看它的请求,可以看到它本身就没有做跨域的相关配置。

image.png

对于允许跨域的图片我们可以在 Headers 里面看到

Access-Control-Allow-Origin:*
复制代码

对于这个问题,最简单的解决方案就是直接在所在图片的 img 标签里面加上 crossOrigin = "anonymous",即:

<img crossorigin="anonymous" src="xxx" >
复制代码

在某些情况下如果你发现加上 crossOrigin = "anonymous" 之后,图片显示不出来了,此时给图片的 url 中拼上一个随机字符串即可。

<img crossorigin="anonymous" :src="`xxx?_=${Date.now()}`" >
复制代码

当然,想要永久的解决这个问题需要后端同学配合在图片服务器上设置 图片服务器配置 Access-Control-Allow-Origin: *

本地图片统跳调试正常,上线之后APP中无法显示

这个问题比较蛋疼,目前也没找到导致该问题的具体原因,经过尝试之后一个可行的解决方案是将本地图片上传至 OSS,然后在 imgsrc 属性中加上时间戳,即:

<img crossorigin="anonymous" :src="`xxx?_=${Date.now()}`">
复制代码

截图不全

要解决这个问题,我们只需要在截图之前将页面滚动到顶部即可

document.body.scrollTop = document.documentElement.scrollTop = 0;
复制代码

文章中如有不对的地方,欢迎小伙伴们多多指正。

谢谢大家~ 💘

分类:
前端