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で読み込むのがいいのかなぁとか思ったり。

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

• JavaScript で File API を使用してファイルを読み取る
• event.originalEvent、jQuery.event.props.push、jQuery.event.fixHooks について
• Drag and DropとFile APIを試す

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

• 今更だけどdata URI Schemeって何？
• [CSS] CSSで利用する画像をSpriteにするかBase64にするかを考察してみた

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

• FirefoxではWebWorker内でFileReaderが使えない(T_T)

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