【mBaaS】javascriptでファイルストアから取得したデータを画像ファイルに変換して表示する #JavaScript

mBaaSを利用してファイルストアに保存している画像データを取得した場合、取得したデータを画像ファイルに変換する必要があります。今回はFileReaderを利用して表示してみようと思います。

responseTypeの設定

ファイルストアのリファレンスを確認してみたところ、downloadメソッドを使用するときは、引数にresponseTypeを指定することができます。ここでデータ形式を設定することができます。

File.download ( fileName , responseType , callback ) 

指定したファイルのバイナリデータを取得します
Parameters:
・fileName String
　取得するバイナリデータのファイル名

・responseType String
　レスポンスバイナリのデータ形式 arraybuffer/blob (ブラウザ/Monaca利用時のみ必要)

・callback Function
　コールバック関数

Returns:
ファイルのバイナリデータ (付加情報は取得しません)

実装コード

今回は、データ形式をblobに設定します。

<!DOCTYPE HTML>
<html>
<head>
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
    <script src="js/ncmb-2.1.3.min.js"></script>
    <script>
        var ncmb = new NCMB("YOUR_APPLICATION_KEY", "YOUR_CLIENT_KEY");
        ncmb.File.download("image.png", "blob")
            .then(function(fileData) {
                var reader = new FileReader();
                reader.onloadend = function() {
                    var img = document.getElementById("imgId");
                    img.src = reader.result;
                }
                // DataURLとして読み込む
                reader.readAsDataURL(fileData);
            })
            .catch(function(err){
              // エラー処理
              alert('error = ' + err);
            });
    </script>
</head>
<body>
    <img id="imgId">
</body>
</html>

これでファイルストアから取得したデータを画像ファイルに変換して表示することができました。