vue html2canvas 實現截圖功能

前幾天公司項目里有這樣一個需求，進入網頁可以整個拍照，就想到了整個截圖，生成的圖片結合文字，二維碼再次生成截圖。好，廢話不多說了。直接上邏輯和代碼。'

這個問題的解決方案：html to canvas to png.
目前有一個這樣的插件: html2canvas,

gitHub:https://github.com/niklasvh/html2canvas

<div>
    <div class="rankWrap reg-main RegMain" id="RegMain">
      <div id="picMain">
        <img class="bg" id="bg" style="width:100%;height:100%;" :src="imagesPath+'/2021/images/map/map_img3.jpg'"/>
      </div>
      <!-- 拍照 -->
      <img class="bg" id="tupian" style="width:100%;height:100%;" :src="picUrl"/>
      <img class="pic" @click="chanPic" :src="imagesPath+'/2021/images/map/map_img2.png'"/>
    </div>
  </div>

　　

var that = this;
        let shareContent = document.getElementById('picMain');
        html2canvas(shareContent,{
          logging: false, //日志開關，便於查看html2canvas的內部執行流程
          width: shareContent.clientWidth, //dom 原始寬度
          height: shareContent.clientHeight,
          scrollY: 0, 
          scrollX: 0,
          useCORS: true
        }).then(function(canvas){
          let imgUrl =  canvas.toDataURL('image/' + "jpg");
          document.getElementById("RegMain").style.transform = `rotate(90deg)`;
          that.picUrl = imgUrl
          that.shareData = {
            url: imgUrl
          }
          that.show = true;
       });