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

Me encanta que en HTML5 pueda 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/)En HTML5, ¿puedes guardar una imagen en caché mediante programación?

Tengo una aplicación que he escrito para el MObile Safari del iPhone que almacena en caché todo fuera de línea a excepción de las imágenes. Las imágenes todavía tienen que descargarse del servidor, y no sé cómo garantizar que se mantendrán en la memoria 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/objetivo-C.

Fuente

2009-06-18 JayCrossler

Observe la 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) pasar la imagen a lienzo, luego a canvas.toDataURL() para obtener una url de datos para la imagen, que luego puede almacenar en la base de datos normal o apis de almacenamiento sin conexión.

Fuente

2009-06-18 01:09:26 olliej

Por Caché de aplicación, quiere usted decir con el Manifiesto? Tengo el manifiesto funcionando bastante bien (http://wecreategames.com/blog/?p=210), pero quiero desplegar imágenes dinámicas durante la sesión y tenerlas disponibles más adelante cuando esté fuera de línea. Después de buscar, no estoy seguro de qué otro caché de aplicaciones podría querer decir. ¡Gracias! – JayCrossler

Eso es lo que quise decir. Si desea descargar otras imágenes, lo que debe hacer depende de las circunstancias. Si controla dónde están todas las imágenes, las entradas del manifiesto de la caché de la aplicación se consideran prefijos, por lo que 'http://example.com/images' en el manifiesto dará lugar a cargas debajo de las imágenes, digamos 'http: // example .com/foo.jpeg 'se colocará en la memoria caché de la aplicación para cargas posteriores. Si no controlas dónde están las imágenes, deberás hacer el sorteo del truco canvas + toDataURL que también mencioné. – olliej

Muy bueno. Volveré a leer la especificación del manifiesto, no sabía que funcionó. También recibí el truco de toDataURL que sugeriste que funcionaras, aunque necesitaba asegurarme de que las imágenes venían del mismo dominio que el HTML. Publiqué el código de trabajo en http://wecreategames.com/blog/?p=219 – JayCrossler

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

Fuente

2010-04-06 10:04:37 mb21

podría almacenar las imágenes utilizando el Data UI scheme en la base de datos HTML5.

Fuente

2010-07-24 23:06:24 Andrew

Puede hacer lo que Google hace en Mobile GMail e implementar como una URL de datos. Esto significa que los siguientes se almacenarán en caché como parte de la página (si están incluidos en cache.manifest), ya que no son externos. O bien:

<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">

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

Fuente

2011-01-24 13:44:42 Junto

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

Respuesta

Cuestiones relacionadas