html2canvas页面生成截图

什么是 html2canvs?

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

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

html2canvas 可以用来做什么

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

如何使用 html2canvas

import html2canvas from 'html2canvas'
  

async getCreatedImg() {
      const _this = this
      const dom = document.querySelector('#poster-copy') 
      let _time = 0
      const c = setTimeout(() => {
        this.$toast('海报生成失败，请重新生成。')
        this.$loading.hide()
        clearTimeout(c)
        _time = 1
      }, 5000)
      // console.log(dom, 'dom')
      if (dom) {
        html2canvas(dom, { 
　　　　　　backgroundColor: null,

　　　　　　useCORS: true, 

　　　　　　scrollY: 0 
　　　　　　})
          .then((canvas) => {
            const dataURL = canvas.toDataURL('image/png')
            _this.base64bigShare = dataURL
              _this.$loading.hide()
            }
            clearTimeout(c)
          })
          .catch(() => {
            _this.$loading.hide()
            clearTimeout(c)
          })
      }
    },

踩吭参考：https://blog.csdn.net/daimaxiaoyu/article/details/126931042