HTML5标签下载失败，因为标签的src属性收到了一个很长的base64字符串，如何处理？ [重复]

Question

这个问题在这里已有答案：

• Download Canvas as PNG in fabric.js giving network Error 3回答

batchDownloadImages() {
  const aTagDownload = [
    {
      download:'foo',
      href:'a HD image's long base64 str comes from canvas.toDataUrl()'
    },
    {
      download:'bar',
      href:'a HD image's long base64 str comes from canvas.toDataUrl()'
    }
  ]
  const a = document.createElement('a');
  aTagDownloadData.forEach((e) => {
    a.setAttribute('download', `${e.download}.jpg`);
    a.setAttribute('href', e.href);
    a.click();
  });
};

以下方法可以批量下载图像。

但是当HD图像的大小大于阈值时，其base64字符串太长，因此Tag的href属性不能保存long base64字符串。最终结果是下载失败。

Long base64 image download failed

顺便说一句，当我将长base64字符串粘贴到Chrome的网址栏时，标签会断开。

任何人都可以给我一个处理这种情况的解决方案吗？

非常感谢。

Answer 1

将Base64字符串传输到Blob网址。

在设置Tag的href属性值之前，将base64字符串传输到blob对象并将对象传输到URL类型。

因为浏览器在href属性中具有最大长度，但是当我们将base64字符串传输到blob url时，blob url足够短以达到href的工作条件。

例如：

• base64字符串：'data：image / png; base64，iVBORw0KGgoAAAANSUhEUgAABDgA ...'**长于浏览器限制**
• blob url：http://localhost:9090/c22bba35-9d03-4ab7-92f5-3eb05fa0509d

---

batchDownloadImages() {
  const aTagDownload = [
    {
      download:'foo',
      href:'a HD image's long base64 str comes from canvas.toDataUrl()'
    },
    {
      download:'bar',
      href:'a HD image's long base64 str comes from canvas.toDataUrl()'
    }
  ]
  const a = document.createElement('a');
  aTagDownloadData.forEach((e) => {
    a.setAttribute('download', `${e.download}.jpg`);
    this.dataURIToBlob(e.href, (blob) => {
      a.setAttribute('href', URL.createObjectURL(blob));
    });
    a.click();
  });
};

dataURIToBlob(dataURI, callback) {
  const binStr = atob(dataURI.split(',')[1]);
  const len = binStr.length;
  const arr = new Uint8Array(len);

  for (let i = 0; i < len; i++) {
    arr[i] = binStr.charCodeAt(i);
  }

  callback(new Blob([arr]));
},