2018/09/07更新

[フロントエンド] 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形式で値を取得するところです。これでバイナリデータを受け取ることができます。

なお、上記のコードの中で利用しているasyncawaitについては、「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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。