在JavaScript中从base64字符串创建Blob

Question

在JavaScript中从base64字符串创建Blob

我在字符串中有base64编码的二进制数据。

const contentType = 'image/png';const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8
/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';

我想创建一个blob:包含此数据的URL并将其显示给用户。

const blob = new Blob(????, {type: contentType});const blobUrl = URL.createObjectURL(blob);window.location = blobUrl;

我还没有弄清楚如何创建Blob。

在某些情况下，我可以通过使用data:URL 来避免这种情况。

const dataUrl = `data:${contentType};base64,${b64Data}`;window.location = dataUrl;

但是在大多数情况下，data:URL非常大。

---

如何Blob在JavaScript中将base64字符串解码为对象？

Answer 1

优化（但不太可读）的实现：function&nbsp;base64toBlob(base64Data,&nbsp;contentType)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;contentType&nbsp;=&nbsp;contentType&nbsp;||&nbsp;''; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;sliceSize&nbsp;=&nbsp;1024; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;byteCharacters&nbsp;=&nbsp;atob(base64Data); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bytesLength&nbsp;=&nbsp;byteCharacters.length; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;slicesCount&nbsp;=&nbsp;Math.ceil(bytesLength&nbsp;/&nbsp;sliceSize); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;byteArrays&nbsp;=&nbsp;new&nbsp;Array(slicesCount); &nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;sliceIndex&nbsp;=&nbsp;0;&nbsp;sliceIndex&nbsp;<&nbsp;slicesCount;&nbsp;++sliceIndex)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;begin&nbsp;=&nbsp;sliceIndex&nbsp;*&nbsp;sliceSize; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;end&nbsp;=&nbsp;Math.min(begin&nbsp;+&nbsp;sliceSize,&nbsp;bytesLength); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bytes&nbsp;=&nbsp;new&nbsp;Array(end&nbsp;-&nbsp;begin); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;offset&nbsp;=&nbsp;begin,&nbsp;i&nbsp;=&nbsp;0;&nbsp;offset&nbsp;<&nbsp;end;&nbsp;++i,&nbsp;++offset)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;bytes[i]&nbsp;=&nbsp;byteCharacters[offset].charCodeAt(0); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;byteArrays[sliceIndex]&nbsp;=&nbsp;new&nbsp;Uint8Array(bytes); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Blob(byteArrays,&nbsp;{&nbsp;type:&nbsp;contentType&nbsp;});}