En HTML5, ¿puede guardar una imagen en caché mediante programación?

Question

Me encanta que en HTML5 puede guardar datos de texto en una base de datos local, e incluso puede usar SQL para hacerlo. ( http://webkit.org/blog/126 / webkit-does-html5-client-side-database-storage / )

Tengo una aplicación que escribí para MObile Safari del iPhone que almacena todo en caché sin conexión excepto las imágenes. Las imágenes aún deben descargarse del servidor, y no sé cómo asegurarme de que se mantendrán en caché. Idealmente, me gustaría escribirlos en la base de datos localStorage.

Estaba pensando en escribir una imagen en el lienzo, y luego serializar eso como texto ... ¿alguna idea? ¿Hay alguna manera más fácil de hacer esto?

Idealmente, me gustaría hacer todo esto con HTML y JavaScript, sin aplicaciones nativas / Objective-C.

Answer 1

Mire el caché de la aplicación en html5, que básicamente hace exactamente lo que desea (también es lo que desea usar si desea admitir aplicaciones web completamente fuera de línea).

Alternativamente, podría (algo feo) mostrar la imagen en el lienzo, luego en canvas.toDataURL () para obtener una URL de datos para la imagen, que luego puede almacenar en la base de datos normal o en las API de almacenamiento fuera de línea.

Answer 2

Podría hacer lo que Google hace en Mobile GMail e implementarlo como una URL de datos. Esto significa que lo siguiente se almacenaría en caché como parte de la página (si se incluye en cache.manifest), ya que no son externos. Cualquiera:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon">

O:

<style type="text/css">
.Jd{background:#fff;width:100%;border-width:7px;-webkit-box-sizing:border-box;-webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAYAAAAvg9c4AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUlJREFUeNpi/P//P4O+VwcfAwODGxDLATGITSr4BMSPgHjXxW0Vnxj1PNtFmBgZU/79/38MKHgBqoAoADQATEMdZQA0xwpozlwWEUFu7zfvvx4ACp5gIBOAXAekDgEN/yEqzOPD9P3nHwWoC6kBLnz99kue6eu3n4xAzg8Civ8jYXwu/vXt+y8GJgYagBFuKAuOSCEUabD0CYsgxmHifVjWQwYwb+KSJ2go0ABGAuHISMiCkZ5OBfm5mN9//MaBr1BBDjvkSMMSH2z8vBzMLI4Wqjzrdl7UA4qdwqOYkUhHGjhbqfOwxAaafjh0+q7fm3dfQK49B8RfSPUu0FIeIGUkIsTjBjKPEVhHyQO93zV96ZFXR8/c+/zkxYdfpBoqIyHAZm2ixJsZbSMGDM4ykKEgcREgzgRibSAWIiNu3gHxVSCeDsRvAAIMAK29e2M9JZVZAAAAAElFTkSuQmCCCg==") 9 7 8 7}
</style>

Lea más sobre el tema aquí: http://www.websiteoptimization.com/ speed / tweak / inline-images /

Answer 3

Puede almacenar las imágenes utilizando el Esquema de IU de datos en la base de datos HTML5.

Answer 4

vea también: http://www.w3.org/TR/offline-webapps/