html2Canvas将固定标签内的内容转成图片

需求背景：用户可保存固定标签内容下的东西为图片。

一、html2Canvas插件

1. npm install --save html2canvas
2. import html2canvas from 'html2canvas'
3. 给指定标签定义ref

二、实现部分

<div class="export-image" ref="imageWrapper">
<!-- 我是需要导出成图片的内容 -->
</div>

    // 保存图片到本地
    saveLocality() {
      console.log('保存到本地');
      const clientWidth = this.$refs.imageWrapper.offsetWidth;
      const clientHeight = this.$refs.imageWrapper.offsetHeight;
      const kh = [clientWidth, clientHeight];
      setTimeout(() => {
        html2Canvas(this.$refs.imageWrapper, { 
          useCORS: true, // 是否跨域加载图片
          logging: true, 
          // allowTaint:true,  // 是否允许跨域图像污染画布
          scale: 5 
        }).then((canvas) => {
          const dataURL = canvas.toDataURL('image/png');
          this.download(dataURL, kh);
        });
      }, 1000);
    },
     getUrlBase64(url, kh) {
      return new Promise((resolve) => {
        let canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const img = new Image();
        img.crossOrigin = 'Anonymous'; // 允许跨域
        img.src = url
        img.onload = () => {
          // eslint-disable-next-line prefer-destructuring
          canvas.height = kh[1];
          // eslint-disable-next-line prefer-destructuring
          canvas.width = kh[0];
          ctx.drawImage(img, 0, 0, kh[0], kh[1]);
          const dataURL = canvas.toDataURL('image/png');
          canvas = null;
          resolve(dataURL);
        };
      });
    },
    download(imgUrl, kh) {
      this.getUrlBase64(imgUrl, kh).then((base64) => {
        const link = document.createElement('a');
        link.href = base64;
        link.download = `入会二维码.png`;
        link.click();
      });
    },