截图功能关键代码

HTML逻辑

<div class="imgSave">
      <el-button @click="saveImage('Top3Img', 'A')">进行截图</el-button>
         <div id='Top3Img' ref='Top3Img' style='height: 300px; width:500px;border:1px solid red;'>
              <div>图表</div>
         </div>
</div>
<div class="imgGet">
      <el-button @click="getImage">获取截图</el-button>
         <div class="content">
               <img :src=this.imgSrc >
         </div>
</div>

JS逻辑

//将图片保存至loclstorage
saveImage(divText, imgText) {
    let canvasID = this.$refs[divText]
    let a = document.createElement('a')
    html2canvas(canvasID).then(canvas => {
        let dom = document.body.appendChild(canvas)
        dom.style.display = 'none'
        a.style.display = 'none'
        document.body.removeChild(dom)
        //toDataURL可以将图片变成png形式字符串
        const LocalstorageImg = dom.toDataURL('img/png')
        console.log(typeof LocalstorageImg)
        localStorage.setItem('Img', LocalstorageImg);
    })
},

//拿到图片
getImage(){
      let that = this
      const x = localStorage.getItem('Img')
      //blob即： x由 字符串 转成 对象（转码了）
      let blob = that.dataURLToBlob(x)
      console.log(blob)
      //blob对象URL化，并赋值给imgSrc
      this.imgSrc = URL.createObjectURL(blob)
      console.log(URL.createObjectURL(blob))
 }

//图片转格式
dataURLToBlob(dataurl) {
            let arr = dataurl.split(',')
            let mime = arr[0].match(/:(.*?);/)[1]
            let bstr = atob(arr[1])
            let n = bstr.length
            let u8arr = new Uint8Array(n)
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n)
            }
            return new Blob([u8arr], { type: mime })
        },