首页 > web前端 > js教程 > 如何在 JavaScript 中将数据 URL 转换为 Blob?

如何在 JavaScript 中将数据 URL 转换为 Blob?

DDD
发布: 2024-10-29 21:20:30
原创
695 人浏览过

How to Convert a Data URL to a Blob in JavaScript?

将数据 URL 转换为 Blob

使用 FileReader 的 readAsDataURL() 将任意数据转换为数据 URL 是一项有用的技术。但是,如果您需要将该 Data URL 转换回 Blob 实例怎么办?

浏览器本机转换

目前,没有内置的浏览器 API 可以支持直接将数据 URL 转换为 Blob。但是,有一些利用自定义 JavaScript 代码的解决方案。

自定义 JavaScript 解决方案

Matt 在 Stack Overflow 上提出了一种被广泛接受的方法(如何将 dataURL 转换为JavaScript 中的文件对象?)。以下是他的代码的更新版本:

<code class="javascript">function dataURItoBlob(dataURI) {
  const byteString = atob(dataURI.split(',')[1]);
  const mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

  const ab = new ArrayBuffer(byteString.length);
  const ia = new Uint8Array(ab);

  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }

  const blob = new Blob([ab], { type: mimeString });
  return blob;
}</code>
登录后复制

用法

您现在可以使用 dataURItoBlob() 将数据 URL 转换为 Blob 对象:

<code class="javascript">const dataURL = 'data:image/png;base64,...';
const blob = dataURItoBlob(dataURL);</code>
登录后复制

以上是如何在 JavaScript 中将数据 URL 转换为 Blob?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板