Em HTML5, você pode salvar uma imagem para o cache programaticamente?

Question

Eu amo que em HTML5, você pode salvar os dados de texto para um banco de dados local, e pode até mesmo usar SQL para fazer isso. ( http://webkit.org/blog/126 / webkit-faz-html5-client-side-database-storage / )

Eu tenho um aplicativo que eu escrevi para o iPhone Safari móvel que armazena tudo fora de linha, exceto para imagens. As imagens ainda tem que ser baixado a partir do servidor, e eu não sei como garantir que eles vão ficar em cache. Idealmente, eu gostaria de escrevê-los ao banco de dados localStorage.

Eu estava pensando em escrever uma imagem para a tela, e em seguida, serialização que como texto ... alguma idéia? Existe alguma maneira fácil de fazer isso?

Idealmente, eu gostaria de fazer isso tudo com HTML e JavaScript, sem aplicativos nativos / objective-C.

Answer 1

Olhe para o cache do aplicativo em HTML5, que faz basicamente exatamente o que você quer (que é também o que você deseja usar, se você quiser dar suporte a aplicativos web completamente off-line).

Como alternativa, você poderia (um pouco feio) daw a imagem para a tela, em seguida, para canvas.toDataURL () para obter um url de dados para a imagem, que você pode então armazenar no banco de dados ou armazenamento offline apis normais.

Answer 2

Você poderia fazer o que o Google faz em Mobile GMail e implementar, como dados de URL. Isto significa que seguintes seria armazenado em cache como parte da página (se incluído no cache.manifest), como eles não são externos. Ou:

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

Leia mais sobre o assunto aqui: http://www.websiteoptimization.com/ velocidade / ajuste / inline-images /

Answer 3

Você pode armazenar as imagens usando o UI de Dados esquema no banco de dados HTML5.

Answer 4

ver também: http://www.w3.org/TR/offline-webapps/