[javascript + firebase]のサンプルコードを見つけ難かったのでメモるシリーズ
Firebase Cloud Storage とは
Google Firebase のクラウドにあるストレージです。ユーザーの画像などを保存してWEBサイトから参照できます。どのフォルダをRead, Writeするのか、認証済みユーザーだけWriteできるようにするとか、アクセス権を簡単に設定できます。そのうえ、どれだけのファイル数、ファイル容量を保存しているのか、アクセス回数とか運用もできちゃいます。
このサンプルは
パソコン内の画像ファイルをストレージにアップロードします。次にクラウドストレージ内にある複数の画像ファイルをダウンロードして表示します。
1. パソコン内の画像ファイルを選択して、その画像をCanvasにセットする
hoge.html
<div class="card shadow-sm m-4">
<div class="card bg-success text-white">
<h2 class="card-header">アバター画像をアップロード</h2>
</div>
<div class="card-body">
<input type="file" id="selectImageID" accept="image/*" style="padding: 4px;">
<canvas id="canvas-area"></canvas>
<div id="OriginalFileUpload"></div>
</div>
</div>
<div id="imageSelected" style="visibility:hidden;display:block;background-color:#c0c0c0;"></div>
hogehoge.js
// 画像ファイルを読み込む, [selectImageID]ボタンでファイルを選ぶこと[change]ができるようにイベントリスナーを有効にする。
function selectImage() {
var formFileUp = document.getElementById('selectImageID');
formFileUp.addEventListener('change', function (e) {
e.preventDefault(); // ページ遷移をキャンセル
var fileObj = e.target.files; // ←ここで画像ファイルを取得する
// （検査）WEBブラウザが File API に対応しているか確認
if(window.File && window.FileReader && window.FileList && window.Blob) {
//console.log('大丈夫、File API対応のブラウザだよ');
} else {
file.style.display = 'none';
result.innerHTML = 'ファイルを選択できるWEBブラウザを利用ください（このブラウザはFile API非対応）';
return;
}
if(!fileObj[0].type.match('image.*')) { alert('有効な画像ではありません'); return; }
if(fileObj[0].size > 1000000) { alert('1MB未満のファイルのみアップロード可能です'); return; }
var reader = new FileReader();
// ファイルを読込実行
reader.readAsDataURL(fileObj[0]);
// ファイルを読み終わったら↓を実行する
reader.onload = function() {
var img = document.createElement('img');
img.src = reader.result;
img.onload = function() {
document.getElementById('imageSelected').appendChild(img);
}
var canvas = document.getElementById('canvas-area');
var context = canvas.getContext('2d'); // 描画を有効にする
canvas.width = 80;
canvas.height = 80;
canvas.style.backgroundColor = "rgba(255,255,255,0)";
var imgResize = new Image();
imgResize.src = img.src;
//画像をオブジェクトに取り込んだら、画像を80x80にリサイズして表示する;
imgResize.onload = function() {
context.drawImage(imgResize,0,0,imgResize.width,imgResize.height,0,0,80,80*imgResize.height/imgResize.width);
var strHTML = '<p><input class="btn btn-success" id="btnAvaUp" type="button" value="この画像をアップロードする" onClick="AvaterUpload()"></p>'
+ '<div id="GoTop"></div>';
document.getElementById('OriginalFileUpload').insertAdjacentHTML('afterbegin', strHTML);
}
}
});
}
2. ファイルをアップロードする
これはCanvasにセットした画像ファイルをストレージに保存（アップロード）するサンプル。
hogehoge.js
// アバター画像をFireStoreへアップロードする（2021/May）
function AvaterUpload() {
var storageRef = firebase.storage().ref(); // アップロード先のストレージ
var canvas = document.getElementById('canvas-area'); // アップロードする画像が保存されたキャンバス
canvas.toBlob(function(blob) {
var newImg = new Image();
newImg.src = URL.createObjectURL(blob);
var userID = document.forms['MemberUpdate'].elements['userid'].value;
var uploadTask = storageRef.child('userid/' + userID + '.png').put(blob); // アップロード実行
uploadTask.on(
'state_changed',
(snapshot) => {
//console.log("snapshot = " + snapshot);
}, (error) => {
//console.log("ERROR:" + error.message);
}, () => {
uploadTask.snapshot.ref.getDownloadURL().then(function(downloadURL) {
console.log('File uploaded = ' + downloadURL);
document.forms['MemberUpdate'].elements['imageURL'].value = downloadURL; // アップロードした画像URLをセット
});
}
);
}, 'image/png');
}
3. ファイルをダウンロードする
これはストレージから複数の画像ファイルを読み込む（ダウンロード）するサンプル。
hoge.html
<body>
<!-- 読み込んだ画像を挿入する宛先のタグ -->
<div id="avaRadio"></div>
</body>
hogehoge.js
// ボタン［アバター画像を選ぶ］※一覧を表示して選択する
function avaterView() {
document.getElementById('avatarListPath').textContent = "";
var strHTML = '<table border="0"><tbody><tr><td>';
strHTML = strHTML + '<div id="img"></div><div id="avaRadio"></div>';
strHTML = strHTML + '</td></tr></tbody></table>';
document.getElementById('avatarListPath').insertAdjacentHTML('beforeend', strHTML);
var storageRef = firebase.storage().ref();
var listRef = storageRef.child('avaters');
listRef.listAll().then(function(res){
res.items.forEach(function(folderRef){
var avaterImage = storageRef.child(folderRef.fullPath);
var additionalImage = document.createElement('img');
avaterImage.getDownloadURL().then(function(url){
additionalImage.src = url; // アバター画像へのURLパス
var strAva = '<label>'
+ '<input type="radio" name="imageURL" value="' + additionalImage.src + '" checked="checked">'
+ '<img src="' + additionalImage.src + '" checked="checked">'
+ '</label>';
document.getElementById('avaRadio').insertAdjacentHTML('beforeend', strAva);
});
});
});
}