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