前几天公司项目里有这样一个需求，进入网页可以整个拍照，就想到了整个截图，生成的图片结合文字，二维码再次生成截图。好，废话不多说了。直接上逻辑和代码。'

这个问题的解决方案：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;
       });