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

图片转为base64

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAEh0lEQVRoge2XbYhUVRzGn/85d+687OzMzsyua9aiICJoLmYKRm8gvRnmB2ntixR+EfSTQsWUmiddXY0wKIk0siIoyL4kQkqUIkiR2KdeTNA1J6ud3dnZmd2dl3vvOf8+bJNrkbl3V5G4v0/ncs6993nuc87/nAsEBAQEBAQEBAQEXC8M0F9tvtK+pWAFMV7oP/oBulb/TWW8mP8SxQDlNiXSjevC5nTH912wJ5OE5ffGBgTw39vlHc1zocOcUAPnFCAUYBr9bkcsO9wTncXMOUm0JjoDnUToY4DGP+uGG/i4C3L1IeghlVlmSUvUdd83NloWNauhExrRdwzMFwC2dXXBWpEC3/0QzOjZ1LyqY+5kxtdGm5MiRCLVNm33yE4cx8/5j3AA7kR1CL8GVh+CBgAmMd8l3g/ZvlaTaCuq+APMbGDMD8O70vPaF2TuWnwA7vC5zEo7Fv6qUnH2J1/Mbz+fGzgVz/ZvEgwZsmj9RQfSjw7fc6/wfPSOshMeicd1e9i2n/Yg05ZExBhOGMMHQfQ4s/6WwBU7ZM00BknNiEa183quULqcyiTvz6D05RBaV3jGzG7bPviaUhBKjU2362XCCTQWqoiHZydSosu27KRmGTXkHAPMKWn0hwAEMZrskHzUtuwFrsYqzTwQknJhhULz57yBegalE6RghI2FzenQht+yLbMmKh7wmcDIrkzW03KJNui1pJlhmBxdN3tauws/AgBnkToziJG5szJPuEZGyXC4pdR/uDqt/d1aXZebLbOvClEIge/xWD7CAp/kcvnP57+JkZtiYHBH6wpBYiMzn5WE04kt/e8DAAOCcOUrXt4c7YhFmg6SwCHP5QtO3fklFos+aEl6y3G9nrBtbQgRnrOzfW/70QH4XMTprQNHyKutBlOz1mN6WcEaL54Bun1nNWeMeVWweMy25JpkU3iO8cqf1R2zvMaFbrdeW1QsjxyezKY24TKaV5gekunlnsZPxKYPQsz4U8BV87dR09mpfmcisdMkRKcQcq/xmta3qv6jY3W/dMGvcN8GYmiCCyqRFCvZoFWXK3sJYFZXj2NAvKwAacXXMqNTMvaNspcvFgq9zCDQ2FmIqDHcH76iq/a07XKMeMoYPkVgp6rd7ukYugR1RUwjgcHt0/aA9MWY9o6FVanXz257LfwYoHJ3270wHkN4rBFZZgyFMi/lt40fVOxumUkslmgj75PELjNdksLrTWwtHvF7bJgqA2MCN6JFZNJLGdohhJ8Em5NMWGxYf2rqtQtWtGkLQSTZ4DJJdIF5r+f1v5dWGJ7KFCa8BhoVYyjdtgou1z1LzpTEnSDcJlm8oiGeleFQhWDOhGXpiOPZQ3Y4er7mophRKE+V8Aa+ExjKJlPJSKk0arf2aCM6Kl6lOw4ILSJLGXIdSB8F08WoGT4RUbVJV5t/w/dhrmV3qUgKxnPc/YlL+WdisBOejDyc7B/4AILLnsFpYbzfR63YdAZITeJdN4VBleosqPRSACi/0Jz5dR1iAHBcTf6f44Zyy/waTiX/S1MBAQEBAQEBAQFTzx8CoAa00Bx42wAAAABJRU5ErkJggg==" />

用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});
  }

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