ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でデータ URL を BLOB に変換するにはどうすればよいですか?

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

DDD
リリース: 2024-10-29 21:20:30
オリジナル
732 人が閲覧しました

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

データ 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート