En HTML5, pouvez-vous enregistrer une image pour la mettre en cache par programme?

Question

J'aime le fait qu'en HTML5, vous pouvez enregistrer des données texte dans une base de données locale et même utiliser SQL pour le faire. ( http://webkit.org/blog/126 / webkit-does-html5-client-side-database-storage / )

J'ai une application que j'ai écrite pour le MObile Safari de l'iPhone qui met tout en cache hors connexion, à l'exception des images. Les images doivent toujours être téléchargées à partir du serveur et je ne sais pas comment m'assurer qu'elles resteront en mémoire cache. Idéalement, j'aimerais les écrire dans la base de données localStorage.

Je pensais écrire une image sur la toile, puis la sérialiser sous forme de texte ... des idées? Y a-t-il un moyen plus facile de faire cela?

Idéalement, j'aimerais faire tout cela avec HTML et JavaScript, sans applications natives / objective-C.

Answer 1

Regardez le cache d’applications en html5, c’est exactement ce que vous voulez (c’est aussi ce que vous voulez utiliser si vous souhaitez prendre en charge des applications Web totalement hors ligne).

Alternativement, vous pouvez (un peu moche) daw l’image sur canvas, puis sur canvas.toDataURL () pour obtenir une URL de données pour l’image, que vous pourrez ensuite stocker dans la base de données normale ou dans une mémoire de stockage hors connexion.

Answer 2

Vous pouvez faire ce que Google fait dans Mobile GMail et l'implémenter en tant qu'URL de données. Cela signifie que les éléments suivants seraient mis en cache dans la page (s'ils sont inclus dans cache.manifest), car ils ne sont pas externes. Soit:

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

Ou:

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

En savoir plus sur le sujet ici: http://www.websiteoptimization.com/ vitesse / modifier / images en ligne /

Answer 3

Vous pouvez stocker les images à l'aide du modèle d'interface utilisateur de données de la base de données HTML5

Answer 4

voir aussi: http://www.w3.org/TR/offline-webapps/