Можно ли в HTML5 сохранить изображение для кэширования программным способом?
https://stackoverflow.com/questions/1010290
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Мне нравится, что в HTML5 вы можете сохранять текстовые данные в локальную базу данных и даже использовать для этого SQL.(http://webkit.org/blog/126/webkit-does-html5-client-side-database-storage/)
У меня есть приложение, которое я написал для MObile Safari на iPhone, которое кэширует в автономном режиме все, кроме изображений.Изображения по-прежнему необходимо загружать с сервера, и я не знаю, как гарантировать, что они останутся в кэше.В идеале я хотел бы записать их в базу данных localStorage.
Я подумывал записать изображение на холст, а затем сериализовать его как текст...Любые идеи?Есть ли более простой способ сделать это?
В идеале я хотел бы сделать все это с помощью HTML и JavaScript, без собственных приложений/objective-C.
Решение
Посмотрите на кэш приложения в html5, который в основном выполняет именно то, что вам нужно (это также то, что вы хотите использовать, если хотите поддерживать полностью автономные веб-приложения).
В качестве альтернативы вы можете (несколько некрасиво) нарисовать изображение на холсте, а затем на canvas.toDataURL (), чтобы получить URL-адрес данных для изображения, который затем можно сохранить в обычной базе данных или в автономном хранилище apis.
Другие советы
Вы можете сделать то же, что Google делает в Mobile GMail, и реализовать в качестве URL-адреса данных.Это означает, что следующие элементы будут кэшироваться как часть страницы (если они включены в кэш.манифест), поскольку они не являются внешними.Или:
<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.
см. также: http://www.w3.org/TR/offline-webapps/
