点击canvas图片下载图片

html结构

<div class="pdf-list>    
<canvas height="1684" width="1191" class="canvas"></canvas>
</div>

 

js部分

  function  dataUrlToBold (url) {
      let arr = url.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bStr = atob(arr[1]),
        n = bStr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bStr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    }
function download(){
const dom= document.querySelector('.pdf-list')
dom.addEventListener('click', (e) => {
        console.log('---e--', e.target);
        const base64 = e.target.toDataURL('image/png')
        let blob = this.dataUrlToBold(base64);
        let obj_url = URL.createObjectURL(blob); // 消除Chrome下文件太大 导致下载失败（网络失败）的问题
        const aDom = document.createElement('a')
        aDom.href = obj_url
        aDom.download = 'bt'
        aDom.click()
      })}