IndexedDB学習3:画像とファイルの保存
ターゲット:データベースの作成と概略(省略) オブジェクトストレージ(省略) を作成する. BLOB形式でピクチャファイル を取得するデータベース・トランザクションの開始(省略) blobをデータベース に保存する保存ファイルを読み込み、ObjectURLを作成ページ表示 .
blob形式で画像ファイルを取得する:
blobをデータベースに保存するには、次の手順に従います.
保存ファイルを読み込み、ObjectURLを作成してページに表示します.
blob形式で画像ファイルを取得する:
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
// File as response
blob = xhr.response;
// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
blobをデータベースに保存するには、次の手順に従います.
transaction.objectStore("elephants").put(blob, "image");
保存ファイルを読み込み、ObjectURLを作成してページに表示します.
// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;
console.log("Got elephant!" + imgFile);
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);
// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};