明るすぎる写真や暗すぎる写真の明度を調整できます。
補正機能はサーバに頼らず Canvas + JavaScript のみで構成されているため、補正の際に画像がサーバにアップロードされることはありません。
本サービスを作るにあたってCanvasを使用したわけですが、その際に起こったことやTIPSなどを備忘録としてまとめておきます。
Web上にあるCanvasの情報は、ゲームなどの用途が主なのか、触ってみた程度のレビューや表示までの手順は紹介記事が多く、私が今回欲しかった情報、特にピクセルデータを取り出して操作する方法の情報は十分とは言えませんでした。
Canvas画像が壊れる
サイズの大きな画像(4608x3456ピクセル 約3.5MBのJPEG画像)を読みこませるとCanvasの画像データが壊れる問題が発生。画像データが壊れる原因は、ChromeのCanvasなどの実験的アクセラレータでした。
以前、Chromeの非推奨な高速化を有効にしていたのを忘れていました。
アクセラレータを解除すると、大サイズ画像の表示が正常化しました。
思い出せばすぐ解決できましたが、実際には思い出すまで時間がかかってしまいました。
1MBを超える画像ファイルをダウンロードさせる
1MB以上の大きな画像ファイルをダウンロードさせる際、FireFoxでは問題なかったのですが、chromeではブラウザのタブがクラッシュしてしまいました。(タブが紫の停止表示になる)原因を探すと、以下のような情報が。
「DataURI はファイルの中身を全て文字列に展開するというやや乱暴な方法であり、大きなファイルを扱うには向いていません。（試した限りでは、2MB 程度の DataURI で Chrome がクラッシュします: 図5）」(http://teikyo.tumblr.com/advent-2011-12-07)
「なお，canvas要素のサイズが大きくなるにつれて，データスキーム形式の文字列もそれに比例して長くなる．この時chromeにおいては長さが1MBを超えたhref属性を指定し，リンクを表示させようとした場合にブラウザがクラッシュするケースがあるので注意する．この問題が発生する場合は次のtoBlobを用いた方法を検討すると良い．」(http://www.h2.dion.ne.jp/~defghi/canvasMemo/canvasMemo.htm#h11)
というわけで、dataURLを直接ダウンロードさせるのではなく、Blobに変換してからダウンロードさせるように変更することで、chromeでもダウンロードが可能になります。
ExplorerCanvasなどIE環境でのCanvasではできないことがある
HTML5.JPの Canvasの使い方 を読むと、ExplorerCanvasを読みこめばすべて解決するかのような雰囲気ですが、当然そのようなことはなく。(IE8以前のCanvas非対応ブラウザが存在しないかのように書いてあるMicrosoftのサイトのほうが酷い。 )
画像やアニメーションといった通常使用はともかく、画像のピクセル情報取得や画像ファイル出力は使用できません。また、これらCanvasの機能を利用した実装であるJS-Image-ResizeやJS-Image-Filter-ddnも使用できないことになります。
というのも、ExplorerCanvasには生ピクセルデータ取得するgetImageData()やjpeg画像を吐き出すgetDataURL()が実装されていません。
latest log様 uupaa-excanvas.js と ExplorerCanvas(excanvas.js) の違い によると、これはVML+Silverlightに生のピクセルデータにアクセスする方法がないからとのことです。
FlashCanvasは getDataURL() を実装していますが、getImageData()はPro(商用利用は有償)でしか使用できないとのこと。
一覧は FlashCanvasのサポートAPIリスト ページで見ることができます。
どうやら uuCanvas.js ならば、フリーでFlashベースのピクセルAPIサポートが使えるようです。ただし、他のCanvas実装と違い、Canvasを利用するためのAPIに標準と異なる部分があるようで、利用するためにはひと手間必要なようです。
仕方がないので画像補正Webサービスのリリース時点ではIE9以降のみサポートとしましたが、 IE で HTML5 Canvas が使えるかどうかを調べる方法 によるとIE9でもCanvasを使用できない場合がありそうで、追加の調査が必要なようです。
0 件のコメント:
コメントを投稿