В HTML5, вы можете сохранить изображение для кэширования программно?

Мне нравится, что в HTML5 вы можете сохранять текстовые данные в локальной базе данных и даже использовать SQL для этого. (http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)

У меня есть приложение, которое я написал для iPhone Mobile Safari, которое кэширует все в автономном режиме, кроме изображений. Изображения все еще должны быть загружены с сервера, и я не знаю, как обеспечить их кэширование. В идеале я хотел бы записать их в базу данных localStorage.

Я думал написать изображение на холсте, а затем сериализовать его как текст ... какие-нибудь идеи? Есть ли более простой способ сделать это?

В идеале я хотел бы сделать все это с помощью HTML и JavaScript, без собственных приложений / target-C.

Ответы на вопрос(4)

Вы можете сделать то, что Google делает в Mobile GMail, и реализовать в качестве URL-адреса данных. Это означает, что следующее будет кэшироваться как часть страницы (если включено в cache.manifest), так как они не являются внешними. Или:

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

Читайте больше на предмете здесь:http://www.websiteoptimization.com/speed/tweak/inline-images/

Решение Вопроса

Посмотрите на кэш приложений в html5, который делает в основном именно то, что вам нужно (это также то, что вы хотите использовать, если хотите поддерживать полностью автономные веб-приложения).

В качестве альтернативы вы можете (несколько некрасиво) нарисовать изображение на холсте, а затем на canvas.toDataURL (), чтобы получить URL-адрес данных для изображения, который затем можно сохранить в обычной базе данных или в автономном хранилище apis.

 14 июн. 2010 г., 10:44
На iPhone / iPad требуется что-то вроде взлома URL-адреса данных - в документации Apple по API явно говорится, что в настоящее время невозможно манипулировать кешем с помощью JavaScript (их формулировка предполагает, что это то, что мы можем увидеть в будущем).
 JayCrossler19 июн. 2009 г., 19:40
Очень круто. Я перечитал спецификации манифеста, я не знал, что это сработало. Я также получил трюк toDataURL, который вы предложили, хотя мне нужно было убедиться, что изображения поступают из того же домена, что и HTML. Я разместил рабочий код наwecreategames.com/blog/?p=219
 18 июн. 2009 г., 22:21
Вот что я имел в виду. Если вы хотите загрузить другие изображения, то, что вам нужно сделать, зависит от обстоятельств. Если вы контролируете, где находятся все изображения, записи манифеста кэша приложения считаются префиксами, поэтому & apos;example.com/images& APOS; в манифесте приведет к любым нагрузкам ниже изображений, скажем, & apos;example.com/foo.jpeg& APOS; будет помещен в кэш приложения для последующих загрузок. Если вы не контролируете, где находятся изображения, то вам нужно будет сделать трюк «Рисование к холсту + toDataURL», о котором я также упоминал.
 JayCrossler18 июн. 2009 г., 18:10
Под кешем приложений вы подразумеваете использование манифеста? У меня манифест работает довольно хорошо (wecreategames.com/blog/?p=210), но хотите снимать динамические изображения во время сеанса и иметь их позже в автономном режиме. После поиска я не уверен, что вы можете иметь в виду кеш другого приложения. Спасибо!

смотрите также: http://www.w3.org/TR/offline-webapps/

Вы можете хранить изображения, используяСхема интерфейса данных в базе данных HTML5.

Ваш ответ на вопрос