JavaScript でデータ URL を BLOB に変換するにはどうすればよいですか?

データ URL の BLOB への変換

FileReader の readAsDataURL() を使用して、任意のデータをデータ URL に変換することは便利な手法です。ただし、そのデータ URL を BLOB インスタンスに変換し直す必要がある場合はどうすればよいでしょうか?

ブラウザネイティブ変換

現在、組み込みのブラウザ API はありません。データ URL を BLOB に直接変換します。ただし、カスタム JavaScript コードを利用する回避策があります。

カスタム JavaScript ソリューション

広く受け入れられている方法は、Stack Overflow で Matt によって提案されました (データ URL を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 中国語 Web サイトの他の関連記事を参照してください。