将 base64 字符串转换为 Blob 对象

这篇具有很好参考价值的文章主要介绍了将 base64 字符串转换为 Blob 对象。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 JavaScript 中,可以使用以下代码将 base64 字符串转换为 Blob 对象:

function base64toBlob(base64, type = 'application/octet-stream') {
  const bstr = atob(base64);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type });
}

其中,base64 是待转换的 base64 字符串,type 是 Blob 对象的 MIME 类型,默认值为 'application/octet-stream'。该函数返回一个 Blob 对象。

可以像下面这样使用该函数:

const base64Str = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAA' +
  'B3RJTUUH4AQWEDgXfX9fkQAAAQ5JREFUOE+lk79vG1Ecx/F/nMeLRKPjjCC6eKslJ7ijY72GAm+ZO7dLwKrtRIaUEEmbJ0dIkllRmi' +
  'JYZKbYu/3M3oh1z68RHw//2Nv7jL13/m853vf3d3NKvS9tNhQlZfIVmR/VmLars4SlpI34NbGc/0B53HJivGWMJJX9W62I0Lx5zN' +
  'b91mj5/rIMNNV7n+6lQASV7ApY6a8U+7D/S/uGJ1hTTYKfJy8PzMvvGHMHb+NR/EZrC/qjkFjKbrzC1e3+3KKoJLw2h/cQN6Rogm' +
  'VDmDJrMMkxmMXlElyFHoPoow7VzJjKpzO7A0GktEASNDkVYmlN6u8GtcHdAmSKfbAr/6jOMkeATnt/0nLjJwxwhAAAAAElFTkSuQmCC';
const blob = base64toBlob(base64Str, 'image/png');

其中,base64Str 是待转换的 base64 字符串,image/png 是 MIME 类型。转换完成后,会得到一个 Blob 对象 blob,可以将其用于上传、下载等操作。文章来源地址https://www.toymoban.com/news/detail-601700.html

到了这里,关于将 base64 字符串转换为 Blob 对象的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 图片格式转换(File、Blob、base64)

    前言 记录一下比较常见的图片格式(File、Blob、base64)在不同的场景他们之间的相互转换的方法。 一、类型简介 Blob BLOB(binary large object): 二进制大对象,是一个可以存储二进制文件的容器。 在计算机中,BLOB常常是数据库中用来存储二进制文件的字段类型。 属性名称 读/写 描

    2024年02月02日
    浏览(48)
  • Base64字符串与图片的相互转换

    本篇博客记载的是一个我们在开发过程中很常用的一个小功能,就是我们在处理图片的时候做数据存放到数据库的功能, 我们存放的不再是本地路径而是一个Base64的字符串! 然后我们在取值的时候又将Base64转换为一个图片文件的做法 简单的两个步骤: Base64Util: ImageUtils: 使用

    2024年02月15日
    浏览(38)
  • js实现base64,url,blob之间的相互转换

    一般来说前端展示图片会通过三种方式: url、base64、blob 1.url: 一般来说,图片的显示还是建议使用url的方式比较好。 2.base64: 如果图片较大,图片的色彩层次比较丰富,则不适合使用这种方式,因为其Base64编码后的字符串非常大,会明显增大HTML页面,影响加载速度。如果图

    2023年04月27日
    浏览(42)
  • 文件流互相转换(blob转base64,二进制流)

    跟用input上传文件的获取到的差不多 用URL.createObjectURL(blob)转化后是这样

    2024年02月10日
    浏览(35)
  • js实现base64、url和blob之间相互转换的三种方式

    Blob对象表示一个不可变、原始数据的类文件对象,Blob表示的不一定是JavaScript原生格式的数据,下面这篇文章主要给大家介绍了关于js实现base64、url和blob之间相互转换的三种方式 url 转 base64 Blob 转 url Blob 转 base64 base64 转Blob base64 转 url 一般来说前端展示图片会通过三种方式:

    2024年02月03日
    浏览(37)
  • 将html字符串中的base64图片转换成file并上传

    目的 解决富文本编辑器中复制粘贴的图片 base64 字符串过长导致无法存储到数据库的问题 思路 通过正则 获取html字符串中里面的所有图片 base64 数组 然后每个图片base64 转成file 使用上传文件的函数 上传到服务器上. 将上传后获取到的图片访问url 替换成 数据里面的 img 的 src

    2024年01月23日
    浏览(44)
  • 【golang】go获取腾讯云cos对象存储 并转为base64字符串输出

    需要引入腾讯云cos的sdk https://github.com/tencentyun/cos-go-sdk-v5 配置yaml如下: go代码编写如下:

    2024年02月11日
    浏览(35)
  • PDF处理控件Aspose.PDF功能演示:使用Java将Base64字符串转换为PDF/JPG/PNG图像

    Aspose.PDF  是一款高级PDF处理API,可以在跨平台应用程序中轻松生成,修改,转换,呈现,保护和打印文档。无需使用Adobe Acrobat。此外,API提供压缩选项,表创建和处理,图形和图像功能,广泛的超链接功能,图章和水印任务,扩展的安全控件和自定义字体处理。 Aspose API支持

    2024年02月04日
    浏览(60)
  • 前端如何加密数据--五种方式(base64加密、md5加密、sha1加密、字符串方法加密、AES加密)

    1.base64加密(包括小写字母a-z、大写字母A-Z、数字0-9、符号\\\"+\\\"、\\\"/\\\"一共64个字符的字符集,另加一个“=”,实际是65个字符) 字符串转换为base64:str64 = window.btoa(str) base64转换为字符串:str=window.atob(str64) 2.md5加密 3.sha1加密   4.字符串的编码和解码(JS函数的escape()和unescape())

    2024年02月16日
    浏览(47)
  • 谈谈:File、Blob、FileReader、ArrayBuffer、base64

    JavaScript 提供了一些 API 来处理文件或原始文件数据,例如:File、Blob、FileReader、ArrayBuffer、base64 等。下面就来看看它们都是如何使用的,它们之间又有何区别和联系。 1. Blob Blob全称为binary large Object 即二进制大对象,他是js中的一个对象,表示原始类似文件的数据。MDN中的解

    2024年02月09日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包