IndexedDB学習3:画像とファイルの保存

1797 ワード

ターゲット:
  • データベースの作成と概略(省略)
  • オブジェクトストレージ(省略)
  • を作成する.
  • 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);
    };