Usando IndexedDB para guardar imágenes

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

Me gustaría guardar la imagen con indexedDB en la base de datos llamada Imágenes al hacer clic en el botón.

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

Otro botón leerá la imagen de la base de datos de imágenes para mostrarla en <div id="resultContent"/>.

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

idea general es:

1. Cree una base de datos con un nombre especificado. Usar indexedDB.open() para eso.
2. Crear un objectStore.
3. Lea un archivo (imagen en su caso) como blob. Usar XMLHttpRequest para eso.
4. Cree una transacción de base de datos.
5. Guarde el archivo blob en la base de datos.
6. Leer archivo blob de la base de datos.
7. Crear URL usando URL.createObjectURL() función
8. Insertar URL en src atributo en un image etiqueta.

Ver más: https://hacks.mozilla.org/2012/02/almacenamiento-de-imágenes-y-archivos-en-indexeddb/

Sí, esto es posible. Dentro de la respuesta de @Yauhen hay un enlace a un artículo de Mozilla que puede explicar una posible implementación. Ofreceré un contexto adicional y una solución alternativa usando canvas.

indexedDB es un almacén de clave/valor indexado que puede almacenar cualquier tipo de objeto de JavaScript que pueda llamarse “clonado.” Una práctica heurística es que esencialmente cualquier cosa que pueda pasar a un Web Worker puede pasar a IDB.

Para almacenar imágenes, las convierte en cadenas. Las cadenas se pueden clonar, por lo que pueden saveToDB() y readFromDB() sin problema

Una forma de convertir una imagen en una representación de cadena es createObjectURL()que haces en un URL objeto. Mi método preferido es toDataURL() que se encuentran en canvas De cualquier manera, está buscando pasos intermedios para

1. cargue su imagen en un blob o en un lienzo y luego
2. extraer esos datos en una cadena almacenable.