Backbone.jsとFileAPIとWebWorkerと

投稿日: 2013/07/05

生ぬるいですね。こんばんは。

さて、Backbone.jsで少し書いて見たに引き続きこんなのも書いてみました。

ドロップした画像や、選択した画像をbase64エンコードする

Base64Encoder
Backbone.js(Underscore.js)とHTML5のFileAPI、WebWorkerを利用しています。
重い画像をUPしたりゴニョゴニョしても、ページの固まった感が出ない様に心がけたつもりです。
スマホでも見れます(bootstrapさまさまや!iPhoneしか見てないけど、、)。

ソースはここに
shimabox/base64Encoder

thumbnailsCollection.js 3行目

FILE_MAX_SIZEの値を変えると、アップロード出来るファイルサイズ制限が変更出来るはず。
もし良かったら落として遊んでみてくだちい。

まとめ

  • 画像をbase64でエンコードしたものをHTMLに埋め込んで使うのは、Httpリクエストを減らしたりとか何かと良かと思います。
  • 但し、サイズの大きい画像の場合は結局ページの読み込みに時間がかかっちゃうから気をつけたほうがよさそう(ページ下部に参考リンクありです)。
  • スプライト画像をエンコードしたものをcssで読み込むのがいいのかなぁとか思ったり。

参考にさせて頂きました。

ドラッグアンドドロップとFile APIを利用するに辺り大変参考にさせて頂きました。

Base64使う時のメリデメですね。分かりやすいっ!

Firefoxで何故か動かず途方に暮れた時に見つけました。
FirefoxはWebWorker内でFileReaderが使えないっ!!!
UAを見てWebWorker使わないで対応するってのも出来るけどやらないっ!!!!

Pocket

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です