[フロントエンド] fetchAPIで画像(バイナリーデータ)を取得する

こんにちは、@yoheiMuneです。
「fetchを用いたAjax通信を行う」で紹介したfetchAPIについて、バイナリデータを扱う実装をブログに書きたいと思います。

目次

どのような場面で使うのか

フロントエンドをReact / Vue / Angular などSPA（Single Page Application）で構成している場合に、サーバーAPIがバイナリーデータを返却する時に使います。例えば、サーバーAPIがPDFを返却したり、QRコード(=画像)を生成して返却する場合には、Ajax通信でバイナリーデータを扱う必要があります。

fetch APIでバイナリーデータを扱う

具体的には以下のように実装します。

(async () => {
    
    async function getImage() {

        // 送信先のURL.
        const url = '/image/001.jpg'

        // fetchでアクセス.
        const res = await fetch(url)

        // Blob形式でデータ取得.
        const blob = await res.blob()

        return blob
    }

    // 画像データを取得（バイナリーデータで取得）.
    const imageData = await getImage()
})()

ポイントはres.blob()と実行し、レスポンスからBlob形式で値を取得するところです。これでバイナリデータを受け取ることができます。

なお、上記のコードの中で利用しているasyncとawaitについては、「ES7のasync/awaitを使って、Promiseを同期的に処理する」をご参照ください。

おまけ1：受け取ったバイナリデータをimgタグで表示する

受け取ったBlobデータを、imgタグで表示するためには以下のように実装します。

// 上で受け取ったBlobデータ.
const blob = /* fetchで取得 */

// Blobデータから、それを表示可能なURLを生成する.
const url = (window.URL || window.webkitURL).createObjectURL(blob)

// imgタグに反映.
const img = document.querySelector('img')
img.src = url

ポイントは、createObjectURLを使ってBlobデータからURLを生成する点です。

おまけ2：受け取ったバイナリデータを、ブラウザからダウンロードする

PDFなどをAPIから受け取った場合には、ブラウザ表示ではなく、ダウンロードさせたいことも多いです。その場合には以下のように実装します。

// 上で受け取ったBlobデータ.
const blob = /* fetchで取得 */

// Blobデータから、それを表示可能なURLを生成する.
const url = (window.URL || window.webkitURL).createObjectURL(blob)

// ダウンロード.
const a = document.createElement('a')
a.href = url                 // ダウンロード先URLに指定.
a.download = '001.jpg'       // ダウンロードファイル名を指定.
document.body.appendChild(a) // aタグ要素を画面に一時的に追加する（これをしないとFirefoxで動作しない）.
a.click()                    // クリックすることでダウンロードを開始.
document.body.removeChild(a) // 不要になったら削除.

こちらのポイントは、aタグのダウンロード機能を使うところです。

最後に

React / Angular / Vue を実装していると、バイナリーデータをJavaScriptで扱う機会もちらほらあります。最近はバイナリデータもJSでちゃんと扱えるので、扱いに慣れたいところです。

最後になりますが本ブログでは、サーバー、フロントエンド、PHP、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！