Verwenden von IndexedDB zum Speichern von Bildern

<img src="https://stackoverflow.com/questions/22740186/picture_1.png" id="imgHolder"/>

Ich möchte ein Bild mit indexedDB in einer Datenbank mit dem Namen Images auf Schaltflächenklick speichern.

<button id="write" onclick="saveToDB()">Save To DB</button>

Eine weitere Schaltfläche liest das Bild aus der Bilddatenbank, um es anzuzeigen <div id="resultContent"/>.

<button id="read" onclick="readFromDB()">Read from DB</button>  

Allgemeine Idee ist:

1. Erstellen Sie eine Datenbank mit einem angegebenen Namen. Verwenden indexedDB.open() dafür.
2. Erstelle ein objectStore.
3. Lesen Sie eine Datei (in Ihrem Fall ein Bild) als Blob. Verwenden XMLHttpRequest dafür.
4. Erstellen Sie eine DB-Transaktion.
5. Dateiblob in der DB speichern.
6. Dateiblob aus Datenbank lesen.
7. URL erstellen mit URL.createObjectURL() Funktion
8. URL einfügen src Attribut in einem image Schild.

Mehr sehen: https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/

Ja, das ist möglich. Innerhalb von @Yauhens Antwort ist a Link zu einem Mozilla-Artikel das kann eine mögliche Implementierung erklären. Ich werde etwas zusätzlichen Kontext und eine alternative Lösung mit anbieten canvas.

indexedDB ist ein indizierter Schlüssel/Wert-Speicher, der jede Art von JavaScript-Objekt speichern kann, das sogenannte “geklont.” Eine praktische Heuristik ist, dass im Wesentlichen alles, was Sie an einen Web Worker weitergeben können, Sie an IDB weitergeben können.

Um Bilder zu speichern, verwandeln Sie sie in Strings. Saiten können geklont werden, also können sie es saveToDB() Und readFromDB() ohne Problem.

Eine Möglichkeit, ein Bild in eine Zeichenfolgendarstellung umzuwandeln, ist createObjectURL()was Sie auf a tun URL Objekt. Meine bevorzugte Methode ist toDataURL() die zu finden sind canvas So oder so suchen Sie nach Zwischenschritten

1. Laden Sie Ihr Bild dann entweder auf einen Blob oder eine Leinwand
2. Extrahieren Sie diese Daten in eine speicherbare Zeichenfolge.