html2canvas.js 跨域图片转为base64,再下载

图片转为base64

用html2canvas截取div,里面可以包含base64的图片,最后以blob下载

let qqqq = ''
  function generateImg(){
    let canvas2 = document.createElement("canvas");
    let _canvas = document.querySelector('.card-img');
    console.log(_canvas)
    console.log()
    let w = parseInt(window.getComputedStyle(_canvas).width);
    let h = parseInt(window.getComputedStyle(_canvas).height);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了  
    canvas2.width = w * 4;
    canvas2.height = h * 4;
    canvas2.style.width = w + "px";
    canvas2.style.height = h + "px";
    //可以按照自己的需求，对context的参数修改,translate指的是偏移量  
    //  var context = canvas.getContext("2d");  
    //  context.translate(0,0);  
    let context = canvas2.getContext("2d");
    context.scale(2, 2);
    html2canvas(document.querySelector('.card-img'), {
          // useCORS:true,
          // allowTaint: true,
      canvas: canvas2,
    }).then(function (canvas) {
      //document.body.appendChild(canvas);  
      //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载  
      // console.log(canvas)
      // console.log(canvas.toDataURL())
      qqqq = canvas.toDataURL()
      // document.querySelector(".download").setAttribute('href', canvas.toDataURL());
      // qqqq = downloadFile('1111',canvas.toDataURL())
    });
  }
  $(".download").click(() => {
    // console.log(qqqq)/
    downloadFile('工行银行卡',qqqq)
  })
  
  function downloadFile(fileName, content) {
    let aLink = document.createElement('a');
    let blob = this.base64ToBlob(content); //new Blob([content]);

    let evt = document.createEvent("HTMLEvents");
    evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
    aLink.download = fileName;
    aLink.href = URL.createObjectURL(blob);

    // aLink.dispatchEvent(evt);
    aLink.click()
  }
  //base64转blob
  function base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;

    let uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {type: contentType});
  }

欢迎各位指教 献丑了 ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ ኈ ቼ ዽ ጿ