HTML5では、画像を保存してプログラムでキャッシュできますか?

StackOverflow https://stackoverflow.com/questions/1010290

  •  06-07-2019
  •  | 
  •  

質問

HTML5では、テキストデータをローカルデータベースに保存でき、SQLを使用して保存できることも気に入っています。 ( http://webkit.org/blog/126 / webkit-does-html5-client-side-database-storage /

画像を除くすべてをオフラインでキャッシュするiPhoneのMObile Safari用に作成したアプリを持っています。画像はまだサーバーからダウンロードする必要があり、それらがキャッシュされたままであることを保証する方法がわかりません。理想的には、localStorageデータベースに書き込みたいと思います。

画像をキャンバスに書き込み、それをテキストとしてシリアル化することを考えていました...何かアイデアはありますか?これを行う簡単な方法はありますか?

理想的には、これをすべてHTMLとJavaScriptで行い、ネイティブアプリ/ Objective-Cは使いません。

役に立ちましたか?

解決

html5のアプリケーションキャッシュを見てください。これは基本的にまさに必要なことを行います(完全にオフラインのWebアプリケーションをサポートする場合にも使用したいものです)。

別の方法として、画像を(ややugい)キャンバスに描画してから、canvas.toDataURL()に移動して、画像のデータURLを取得し、通常のデータベースまたはオフラインストレージAPIに保存できます。

他のヒント

モバイルGMailでGoogleが行うことを実行し、データ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データベースのデータUIスキームを使用して画像を保存できます。

ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top