JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

JavaScriptで画像をBlobに変換するには？

Webアプリケーション開発では、画像などのファイルデータを「Blob（Binary Large Object：バイナリラージオブジェクト）」として扱いたい場面が多くあります。たとえば、画像のアップロード処理やCanvasへの描画、サーバーへのデータ送信などがその代表例です。

JavaScriptでは、fetch()メソッドとBlobオブジェクトを組み合わせることで、URLから取得した画像を簡単にBlobへ変換できます。以下に実際のサンプルコードを示します。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptで画像をBlobに変換</h1>
<div class="sample">
<img src="https://picsum.photos/id/222/300/300.jpg" />
</div>
<button class="Btn">変換</button>
<div class="result"></div>
<h3>上のボタンをクリックすると、画像がBlobに変換されます</h3>
<script>
    let BtnEle = document.querySelector(".Btn");
    let resEle = document.querySelector(".result");
    BtnEle.addEventListener("click", () => {
        fetch("https://picsum.photos/id/222/300/300.jpg")
        .then(function (response) {
            return response.blob();
        })
        .then(function (blob) {
            resEle.innerHTML = "blob.size = " + blob.size + "<br>";
            resEle.innerHTML += "blob.type = " + blob.type + "<br>";
        });
    });
</script>
</body>
</html>

コードのポイント

  • fetch()メソッド：指定したURLの画像リソースを非同期で取得します。
  • response.blob()：取得したレスポンスの本文をBlobオブジェクトとして読み取ります。Promiseを返すため、then()でチェーンして処理できます。
  • blob.size：Blobのデータサイズ（バイト単位）を表します。
  • blob.type：画像のMIMEタイプ（例：image/jpeg）を表します。

実行結果

上記のコードをブラウザで開くと、次のように表示されます。

JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

「変換」ボタンをクリックすると −

JavaScriptで画像をBlobに変換する方法【サンプルコード＆解説つき】

このように、ボタンをクリックすると画像がBlobとして取得され、そのサイズ（blob.size）とMIMEタイプ（blob.type）が画面に表示されます。

補足：その他のBlob変換の方法

なお、<input type="file">でユーザーが選択したローカルファイルは、Fileオブジェクト自体がBlobの一種であるため、そのままsizeやtypeプロパティを参照できます。また、Canvas上の描画内容から直接Blobを生成したい場合は、canvas.toBlob()メソッドを利用すると便利です。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptで配列をセット（Set）に変換する方法｜new Set()の使い方を解説

    JavaScriptでは、new Set() コンストラクタを使うことで、配列を簡単にセット（Setオブジェクト）へ変換できます。セットは同じ値を自動的に1つだけ保持する性質を持つため、配列から重複した要素を取り除きたい場合にも非常に便利です。 配列をセットに変換するサンプルコード 以下は、ボタンをクリックすると配列がセットに変換されて表示される、完全なHTMLサンプルです。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport co

  2. 文字列をJavaScriptオブジェクトに変換する方法【JSON.parse()の使い方】

    JavaScriptでJSON形式の文字列をオブジェクトに変換するには、JSON.parse()メソッドを使用します。このメソッドは、引数に渡された文字列を解析（パース）し、対応するJavaScriptオブジェクトを返します。 サンプルコード <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8 /> <meta name=viewport content=width=device-width, initial-scale=1.0 /> <title>Docum