Using IndexedDB to save images

Question

<img src="picture_1.png" id="imgHolder"/>

Would like to save image with indexedDB in database named Images on button click.

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

Another button will read image from Images database to display in <div id="resultContent"/>.

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

Answer 1

General idea is:

1. Create a database with a specified name. Use indexedDB.open() for that.
2. Create an objectStore.
3. Read a file(image in your case) as blob. Use XMLHttpRequest for that.
4. Create a db transaction.
5. Save file blob in the DB.
6. Read file blob from database.
7. Create URL using URL.createObjectURL() function
8. Insert url in src attribute in an image tag.

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