vue+高德地图截图导出图片

记得设置！！！

WebGLParams: {

          preserveDrawingBuffer: true

        },

<button @click="getIdCarema('container')">点击</button>

// 导出图片

    // base64转流

    dataURLtoBlob(dataurl) {

      console.log(444)

      var arr = dataurl.split(','); var mime = arr[0].match(/:(.*?);/)[1]

      var bstr = atob(arr[1]); var n = bstr.length; var u8arr = new Uint8Array(n)

      while (n--) {

        u8arr[n] = bstr.charCodeAt(n)

      }

      return new Blob([u8arr], { type: mime })

    },

    downloadFile(url, name = 'What\'s the fuvk') {

      console.log(555)

      var a = document.createElement('a')

      a.setAttribute('href', url)

      a.setAttribute('download', name)

      a.setAttribute('target', '_blank')

      const clickEvent = document.createEvent('MouseEvents')

      clickEvent.initEvent('click', true, true)

      a.dispatchEvent(clickEvent)

    },

    downloadFileByBase64(base64, name) {

      console.log(333)

      var myBlob = this.dataURLtoBlob(base64)

      var myUrl = URL.createObjectURL(myBlob)

      this.downloadFile(myUrl, name)

      // console.log(base64)

    },

    getIdCarema(id) {

      console.log(111)

      var element = document.getElementById(id)

      html2canvas(element, {

        backgroundColor: 'transparent',

        logging: false

      }).then(canvas => {

        const context = canvas.getContext('2d')

        // 关闭抗锯齿形

        context.mozImageSmoothingEnabled = false

        context.webkitImageSmoothingEnabled = false

        context.msImageSmoothingEnabled = false

        context.imageSmoothingEnabled = false

        // canvas转化为图片

        this.canvas2Image(canvas, canvas.width, canvas.height, id, '图片')

      })

    },

    canvas2Image(canvas, width, height, id, val) {

      console.log(222, canvas, width, height, id, val) // <canvas width="2312" height="1360" style="width: 1156px; height: 680px;"></canvas> 2312 1360 "container" "图片"

      const retCanvas = document.createElement('canvas')

      const retCtx = retCanvas.getContext('2d')

      console.log('retCanvas', retCanvas)

      retCanvas.width = width

      retCanvas.height = height

      retCtx.drawImage(canvas, 0, 0, width, height, 0, 0, width, height)

      const img = document.createElement('img')

      img.src = retCanvas.toDataURL('image/png') // 可以根据需要更改格式

      // window.sessionStorage.setItem(id, retCanvas.toDataURL('image/png')) // ？

      this.downloadFileByBase64(retCanvas.toDataURL('image/png'), val)

    }