In HTML5, können Sie ein Bild speichern programmatisch cachen?

Question

Ich liebe, dass in HTML5 Sie Textdaten aus in einer lokalen Datenbank speichern können, und sogar SQL, es zu tun verwenden können. ( http://webkit.org/blog/126 / webkit-tut-html5-client-side-Datenbank-Speicher / )

Ich habe eine App, die ich für das mobile Safari iPhones geschrieben habe, die alles offline, außer für Bilder-Caches. Die Bilder haben immer noch vom Server heruntergeladen werden, und ich weiß nicht, wie man sicherstellen, dass sie im Cache gespeichert werden bleiben. Idealerweise möchte ich sie in die Datenbank schreiben local aus.

Ich dachte an ein Bild auf die Leinwand zu schreiben, und dann, dass als Text Serialisierung ... irgendwelche Ideen? Gibt es einen einfacheren Weg, dies zu tun?

Idealerweise möchte ich, dies zu tun, alle mit HTML und JavaScript, um keine native apps / Objective-C.

Answer 1

Schauen Sie sich die Anwendungscache in html5, die im Grunde genau das tut, was Sie wollen (es ist auch das, was Sie verwenden möchten, wenn Sie komplett offline Web-Anwendungen unterstützen möchten).

Alternativ können Sie (etwas hässlich) Daw das Bild auf Leinwand, dann auf canvas.toDataURL () eine Daten URL für das Bild zu bekommen, die Sie dann in den normalen Datenbank oder Offline-Speicher apis speichern kann.

Answer 2

Sie könnten das tun, was Google tut in Mobile GMail und als Daten URL implementieren. Dies bedeutet, dass folgende würde als Teil der Seite im Cache gespeichert werden (falls in cache.manifest enthalten), da sie nicht extern sind. Entweder:

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

Oder:

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

Lesen Sie mehr zu diesem Thema hier: http://www.websiteoptimization.com/ Geschwindigkeit / zwicken / Inline-images /

Answer 3

Sie können die Bilder speichern, mit dem Daten UI-Schema in der HTML5-Datenbank.

Answer 4

Siehe auch: http://www.w3.org/TR/offline-webapps/