Using IndexedDB to save images

Question

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

&         


        

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 th 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/