栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在JavaScript中从Base64字符串创建BLOB

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在JavaScript中从Base64字符串创建BLOB

atob
函数会将base64编码的字符串解码为一个新字符串,并为二进制数据的每个字节提供一个字符。

const byteCharacters = atob(b64Data);

每个字符的代码点(charCode)将是字节的值。我们可以通过使用

.charCodeAt
方法为字符串中的每个字符应用字节值数组。

const byteNumbers = new Array(byteCharacters.length);for (let i = 0; i < byteCharacters.length; i++) {    byteNumbers[i] = byteCharacters.charCodeAt(i);}

您可以将该字节值数组传递给

Uint8Array
构造函数,以将其转换为实型字节数组。

const byteArray = new Uint8Array(byteNumbers);

通过将其包装在数组中并将其传递给

Blob
构造函数,可以依次将其转换为BLOB 。

const blob = new Blob([byteArray], {type: contentType});

上面的代码有效。但是,通过

byteCharacters
在较小的片中进行处理(而不是一次全部)可以稍微提高性能。在我的粗略测试中,512字节似乎是一个不错的切片大小。这为我们提供了以下功能。

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {  const byteCharacters = atob(b64Data);  const byteArrays = [];  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {    const slice = byteCharacters.slice(offset, offset + sliceSize);    const byteNumbers = new Array(slice.length);    for (let i = 0; i < slice.length; i++) {      byteNumbers[i] = slice.charCodeAt(i);    }    const byteArray = new Uint8Array(byteNumbers);    byteArrays.push(byteArray);  }  const blob = new Blob(byteArrays, {type: contentType});  return blob;}const blob = b64toBlob(b64Data, contentType);const blobUrl = URL.createObjectURL(blob);window.location = blobUrl;

完整示例:

const b64toBlob = (b64Data, contentType='', sliceSize=512) => {  const byteCharacters = atob(b64Data);  const byteArrays = [];  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {    const slice = byteCharacters.slice(offset, offset + sliceSize);    const byteNumbers = new Array(slice.length);    for (let i = 0; i < slice.length; i++) {      byteNumbers[i] = slice.charCodeAt(i);    }    const byteArray = new Uint8Array(byteNumbers);    byteArrays.push(byteArray);  }  const blob = new Blob(byteArrays, {type: contentType});  return blob;}const contentType = 'image/png';const b64Data = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';const blob = b64toBlob(b64Data, contentType);const blobUrl = URL.createObjectURL(blob);const img = document.createElement('img');img.src = blobUrl;document.body.appendChild(img);


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/395233.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号