View
78
Download
0
Category
Preview:
Citation preview
FileReaderとcanvas
とサーバサイド@kanayannet
Gunma.web #24
自己紹介名前 : 金澤 宏昭
SNSTwitter : @kanayannet
Facebook : HiroakiKanazawa
愛犬家
今日話すことFileReader
canvas
サーバサイド
挙動の違い
不具合いろいろ
まとめ
FileReader
概要
ユーザのコンピュータ内にあるファイル(もしくはバッファ上の生データ)を Web アプリケーションから非同期的に読み込むことが出来ます。読み込むファイルやデータは File ないし Blob オブジェクトとして指定します。 by Mozilla
規格
HTML5
主に JS から呼び出す
canvas
概要
図形などを描画する為の新しい HTML 要素です。例えば、グラフを描く、写真を合成する、簡単なアニメーションからあまり簡単ではないアニメーションの作成に用いる事が出来ます。 by Mozilla
規格
HTML5
主に JS から呼び出す
FileReader と
Canvas1. input type="�le" から javascript で画像データを抽出
2. 抽出したデータを canvas に移す
3. canvas で画像を加工
4. 適切なサイズ(横幅、高さ)に加工
5. 加工した画像を表示
ネットワーク転送いらず画像を投稿する前の確認画面などでもネットワーク転送し画像を適切なサイズに加工
こういう技術がないと..画像加工はサーバサイドでやらざるを得なかった。
サーバのリソース節約端末で 画像加工するので、各々の端末のリソースで済みます。
サーバサイドLinux
CentOS
ImageMagick
今回
HTML5 向けのブラウザが出て数年が経過...もうガンガンやってもいんじゃね?と思いつつ
サーバサイドに送らず、画像を加工した結果...まあ、色々あったので話します(笑)
挙動の違い
ちなみにJSはこんな感じ $(document).ready(function(){ $("#uploadFile").change(function() { var canvas = $("#myCanvas").get(0); var ctx = canvas.getContext("2d"); // input type file �object var file = this.files[0]; //mime ����� if (!file.type.match(/̂image\/(png|jpeg|gif)$/)) return; var image = $('#image').get(0); var reader = new FileReader(); // FileReader 読�込�完了 reader.onload = function(evt) {
続き // image �読�込�完了 image.onload = function() { var changeWidth = this.width * 0.7; var changeHeight = this.height * 0.7; canvas.width = changeWidth; canvas.height = changeHeight; ctx.drawImage(this, 0, 0, this.width, this.height, 0, 0, changeWidth, changeHeight); } // base64 �画像�URL�指定 image.src = evt.target.result; } // ���読�込� reader.readAsDataURL(file); }); });
どうでした?
違いは..ぼやけ と ジャギリ(シャープ)具合
風景よりも文章のある画像の方が解りやすいかも?
ではもう一度canvas
ImageMagick
違いがあると?例えば...前は ImageMagick で画像縮小し
canvas で画像縮小したものに切り替えてしまうと..
画像の印象が変わってしまう。
裏テクcanvas で縮小する際、一気に縮小しようとせず..
少しずつ縮小すると...それほどジャギらなくなります。
不具合いろいろ
iOSiOS8.0.0 , iOS8.0.1
readAsDataURL でエラーが出ます。
非同期で input type="�le" の中を読むコマンド
mobile safari だけでなく chrome も起きるらしい...
AndroidAndroid Browser で不具合色々
Android 4系(4.4未満くらい?)の標準装備のブラウザ
自分がこう呼ぶのは..google analytics でそう呼ばれているので。
AOSPブラウザーって呼ぶこともある?
Android BrowserreadAsDataURL で読み込めなかったり
データ読み込み後、mime が取れなかったり
readAsDataURL -> canvas にデータを移す途中でハンぐったり
最悪ブラウザ落ちたり..涙
Android Browser機種によって不具合の症状が違います汗
端末ベンダーがよくカスタマイズしてプレインストールしているからか?
Android でもchrome は不具合に遭遇したことはありません。
テストした機種は 7機種
まとめ画像縮小の挙動が違うので..単なる縮小と侮るなかれ
ジャギりが目立たない小さいサムネイル用画像なら使えるかな?
端末によって不具合違うの嫌だ
本当に嫌だ。
ご清聴
ありがとうございま
した!
Recommended