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 向けのブラウザが出て数年が経過...もうガンガンやってもいんじゃね？と思いつつ

サーバサイドに送らず、画像を加工した結果...まあ、色々あったので話します(笑)

挙動の違い

デモcanvas

ちなみに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); }); });

次はサーバサイドImageMagick

どうでした?

違いは..ぼやけ と ジャギリ(シャープ)具合

風景よりも文章のある画像の方が解りやすいかも?

ではもう一度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機種

まとめ画像縮小の挙動が違うので..単なる縮小と侮るなかれ

ジャギりが目立たない小さいサムネイル用画像なら使えるかな?

端末によって不具合違うの嫌だ

本当に嫌だ。

ご清聴

ありがとうございま

した！