HTML5 IndexDB を使用して画像とファイルを保存する例

先日、画像やファイルを localStorage に保存する方法について書きましたが、それは今日私たちが利用できる実用主義についてでした。 ただし、localStorage にはパフォーマンスへの影響があり、これについては後のブログで説明します。将来的に望ましいアプローチは IndexedDB を使用することです。 ここでは、画像とファイルを IndexedDB に保存し、ObjectURL 経由でレンダリングする方法を説明します。

この記事は翻訳されています。原文はこちらです。 IndexedDB への画像とファイルの保存

著者について: ロバート・ナイマン [名誉編集者]

Mozilla Hacks のテクニカル エバンジェリスト兼編集者。HTML5、JavaScript、オープン Web についての講演やブログを行っています。ロバートは HTML5 とオープン Web を強く信じており、1999 年以来スウェーデンおよびスウェーデンで Web のフロントエンド開発に取り組んでいます。ニューヨーク市。彼は定期的に atrobertnyman.com のブログも書いており、旅行と人々との出会いが大好きです。

まず、IndexedDB データベースを作成し、そのデータベースにファイルを保存し、それを読み取ってページに表示する手順について説明します。

1. データベースを作成するか開きます

2. オブジェクトストアを作成する

3. 画像ファイルを BLOB として取得する

4. データベーストランザクションを初期化する

5. 画像 BLOB をデータベースに保存します

6. 保存したファイルを読み出し、そこからObjectURLを作成し、ページ内のimage要素のsrcに設定します。

 // IndexedDBwindow.indexedDB || window.mozIndexedDB || window.msIndexedDB, IDBTransaction || window.OIDBTransaction , dbVersion = 1;/* 注: これを行うための推奨される方法は、これを window.indexedDB に追加することで、Web ブラウザーが実装でプレフィックスの削除を開始するときにグローバル スコープで発生する可能性のある問題を回避できます。ただし、このコードを var IndexedDB などの変数に割り当てることもできますが、その場合はコードがfunction.*/// データベースの作成/オープンvar request = IndexedDB.open(elephantFiles, dbVersion);request.onsuccess = function (event) { console.log(作成/アクセス成功IndexedDB データベース); db = request.result; db.onerror = function (event) { console.log(IndexedDB データベースの作成/アクセス中にエラーが発生しました) }; // objectStore を作成するための暫定的な解決策は廃止されます。 db.setVersion) { if (db.version != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { createObjectStore(); } else { getImageFile(); } else { getImageFile() }// 現在、最新の Firefox バージョンでのみ使用されます。 = 関数 (イベント) { createObjectStore(event.target.result);};

想定される使用方法は、データベースの作成時に onupgradeneeded イベントを発生させるか、より高いバージョン番号を取得することです。 この機能は現在 Firefox でのみサポートされていますが、他の Web ブラウザでも間もなくサポートされる予定です。 Web ブラウザがこのイベントをサポートしていない場合は、非推奨の setVersion メソッドを使用して、その onsuccess イベントに接続できます。

 // objectStoreconsole.log(Creating objectStore)dataBase.createObjectStore(elephants); を作成します。

ここでは、データ (この場合はファイル) を保存する ObjectStore を作成します。一度作成したら、再作成する必要はなく、コンテンツを更新するだけです。

 // XHRvar を作成します xhr = new XMLHttpRequest(), blob;xhr.open(GE​​T, elephant.png, true); // responseType を blobxhr.responseType = blob;xhr.addEventListener(load, function () { if ( xhr.status === 200) { console.log(取得した画像); // 応答としてのファイル blob = xhr.response;受信した blob を IndexedDB に putElephantInDb(blob) }}, false);// XHRxhr.send(); を送信します。

このコードは、ファイルの内容を BLOB として直接取得します。現在、Firefox のみがサポートされています。 ファイル全体を受信したら、BLOB を関数に送信してデータベースに保存します。

 // データベースへのトランザクションを開きますvartransaction = db.transaction([elephants], IDBTransaction.READ_WRITE);

データベースへの書き込みを開始するには、objectStore 名と実行する操作の種類 (この場合は読み取りと書き込み) を指定してトランザクションを開始する必要があります。

 // BLOB を dabasetransaction.objectStore(elephants).put(blob, image) に配置します。

トランザクションが完了したら、目的の objectStore への参照を取得し、そこに BLOB を配置してキーを与えます。

 // 保存されたファイルを取得しますtransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile =event.target.result; // Get window.URL オブジェクト var URL = window.webkitURL || ObjectURL を作成して取り消します var imgURL = URL.createObjectURL(imgFile); // img src を ObjectURL に設定します var imgElephant = document.getElementById(elephant); // ObjectURL URL.revokeObjectURL(imgURL); };

同じトランザクションを使用して、保存した画像ファイルを取得し、次に objectURL を作成して、それをページ内の画像の src に設定します。 たとえば、これは、JavaScript を解析するスクリプト要素に添付された JavaScript ファイルである場合もあります。

 (function () { // IndexedDB varindexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB, IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction, dbVersion = 1.0; // データベース変数を作成/開きます。 request = IndexedDB.open(elephantFiles, dbVersion), db, createObjectStore = function (dataBase) { // objectStore を作成します console.log(Creating objectStore) dataBase.createObjectStore(elephants) }, getImageFile = function () { // 作成しますXHR var xhr = new XMLHttpRequest(), xhr.open(GE​​T, elephant.png, true); // 応答タイプを blob に設定します。 xhr.responseType = blob; xhr.addEventListener(load, function () { if (xhr.status === 200) { console.log(Image取得); // 応答としてBlobを設定します。 blob = xhr.response; console.log(Blob: + blob); // 受信した BLOB を IndexedDB に格納します putElephantInDb(blob); }, false); // XHR xhr.send() を送信します }, putElephantInDb = function (blob) { console.log(Putting elephants in IndexedDB) // データベースへのトランザクションを開きます vartransaction([ elephants], IDBTransaction.READ_WRITE); // BLOB をデータベースに配置します var put =transaction.objectStore(elephants).put(blob, image); // 保存したばかりのファイルを取得しますtransaction.objectStore(elephants).get(image).onsuccess = function (event) { var imgFile =event.target.result; // window.URL オブジェクトを取得します var URL = window.webkitURL || ObjectURL を作成して取り消します var imgURL = URL.createObjectURL(imgFile); // img src を ObjectURL に設定します var imgElephant.setAttribute(src, imgURL); // ObjectURL リクエストを取り消します。 onerror = function (event) { console.log(作成/アクセス時のエラーIndexedDB データベース); }; request.onsuccess = 関数 (イベント) { console.log(IndexedDB データベースの作成/アクセス成功) db = request.result = 関数 (イベント) { console.log(イベントの作成/アクセスエラー) IndexedDB データベース) }; // objectStore を作成するための暫定的なソリューションは廃止予定 if (db.setVersion) { if (db.version) != dbVersion) { var setVersion = db.setVersion(dbVersion); setVersion.onsuccess = function () { getImageFile() } }; } // 将来の使用のため、現在は最新の Firefox バージョンのみ request.onupgradeneeded = function (イベント) { createObjectStore(event.target.result) };})();

URL APIのサポート

インデックスデータベース

Githubのソースコード

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。