html2canvas截圖，包括圓圖

html2canvas截圖，包括圓圖，不包括滾動部分

包括圓圖：useCORS:true

html:

<div class="qr_content" id="imageWrapper">
      <div class="back1-div">
        <p class="thing">只要分享商品，就可以賺佣金哦11</p>
        <img class="avatar" :src="user.avatar"/>
        <p class="nickname">
          <span>{{user.nickname}}</span>
          <span>誠邀你成爲店主</span>
        </p>
        <img class="qr" v-if="qrImage" :src="qrImage" alt="二維碼" width="200px" height="200px">
      </div>
      <img class="back2" src="@/assets/images/qr_back_2.jpg"/>
      <img v-if="buildImg" class="last-img" :style="{width:ImageWidth,height:ImageHeight}" :src="buildImg" alt="">
    </div>

vue:

<script>
  import {
    QR_CREATE
  } from '@/api/global';

  import wxConfig from '@/vue/mixin/wx-config';
  import logo from '@/assets/images/logo.jpg';
  import TitleBar from '@/vue/components/title-bar/';
  import html2canvas from 'html2canvas';

  export default {
    mixins: [wxConfig],
    data() {
      const user = this.getUser();
      const url = this.getUri() + 'user/shop-reg?code=' + user.myCode + '&upname=' + (user.realname || user.nickname) + '&upxiaoqu=' + user.tXiaoqu + '&upcenter=' + user.centreId;
      return {
        qrImage: this.$deployApi + QR_CREATE + "?c=" + encodeURIComponent(url),
        url,
        showShare: false,
        qr_txt: '發送邀請推薦',
        xcxshow: true,

        buildImg: '',
        ImageWidth: '',
        ImageHeight: '',
      }
    },

    created() {
      let that = this;
      this.wxconfig();
      this.$nextTick(() => {
        this.wxShare((this.user.realname || this.user.nickname) + '誠邀您爲衛康大健康服務平臺店主'
          , '高薪店主，月入過萬，一份真正錢多、事少、離家近的自由事業'
          , this.url
          , location.origin + logo);
      });
      this.wx.miniProgram.getEnv(function (res) {
        if (res.miniprogram) {
          // alert(that.qr_txt+'====')
          that.qr_txt = '長按二維碼分享';
          that.xcxshow = false
        }
      })

      setTimeout(() => {
        this.drawCanvas('imageWrapper')
      }, 1000)

    },
    components: {
      [TitleBar.name]: TitleBar
    },

    methods: {
      /**
       * 根據window.devicePixelRatio獲取像素比
       */
      DPR() {
        if (window.devicePixelRatio && window.devicePixelRatio > 1) {
          return window.devicePixelRatio;
        }
        return 1;
      },
      /**
       *  將傳入值轉爲整數
       */
      parseValue(value) {
        return parseInt(value, 10);
      },
      /**f
       * 繪製canvas
       */
      drawCanvas(selector) {
        let that = this;
        console.log(selector);
        // 獲取想要轉換的 DOM 節點
        const dom = document.getElementById(selector);
        console.log(dom);
        const box = window.getComputedStyle(dom);
        // DOM 節點計算後寬高
        const width = this.parseValue(box.width);
        const height = this.parseValue(box.height);
        // 獲取像素比
        const scaleBy = this.DPR();
        // 創建自定義 canvas 元素
        var canvas = document.createElement('canvas');
        // 設定 canvas 元素屬性寬高爲 DOM 節點寬高 * 像素比
        canvas.width = width * scaleBy;
        canvas.height = height * scaleBy;
        // 設定 canvas css寬高爲 DOM 節點寬高
        canvas.style.width = `${width}px`;
        canvas.style.height = `${height}px`;

        // 獲取畫筆
        const context = canvas.getContext('2d');

        // 將所有繪製內容放大像素比倍
        context.scale(scaleBy, scaleBy);

        let x = width;
        let y = height;
        html2canvas(dom, {canvas,useCORS:true}).then(function () {
          return that.convertCanvasToImage(canvas, x, y)
        })
      },
      /**
       * 圖片轉base64格式
       */
      convertCanvasToImage(canvas, x, y) {
        // let image = new Image();
        // let _container = document.getElementsByClassName('container')[0];
        // let _body = document.getElementsByTagName('body')[0];
        this.ImageWidth = x;
        this.ImageHeight = y;
        this.buildImg = canvas.toDataURL("image/png");
        // _body.removeChild(_container);
        // document.body.appendChild(image);
        // return {thisImageWidth,ImageHeight,buildImg};
      },
    }
  }


</script>