Home  >  Article  >  Web Front-end  >  How to Convert a Data URL to a Blob in JavaScript?

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

DDD
DDDOriginal
2024-10-29 21:20:30592browse

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

Converting Data URLs to Blobs

Transforming arbitrary data into a Data URL using FileReader's readAsDataURL() is a useful technique. However, what if you need to convert that Data URL back into a Blob instance?

Browser-Native Conversion

Currently, there is no built-in browser API that directly converts Data URLs to Blobs. However, there are workaround solutions that utilize custom JavaScript code.

Custom JavaScript Solution

A widely accepted method was proposed by Matt on Stack Overflow (How to convert dataURL to file object in javascript?). Here's an updated version of his code:

<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>

Usage

You can now use dataURItoBlob() to transform your Data URL into a Blob object:

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

The above is the detailed content of How to Convert a Data URL to a Blob in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn