スポンサーサイト
2014.01.27 Monday
一定期間更新がないため広告を表示しています
- -
- -
- -
2012.09.26 Wednesday
以下fileReaderに関するメモです。。
iPhoneってinput type="file"が使えなかったんですよね。
これ結構残念な仕様だなぁとずっと思ってました。
それがついに開放!
そしてこのブログでも長いことひっぱてますお絵かきアプリ、
以前作ってみた時、撮った写真にお絵かきできたらいいな、
と思ったのですが、
まぁ、まずファイルにアクセスできないし、ブラウザだけで
完結できないし、とか考えつつあきらめていたのですが、
iOS6にて両方いけるようになったのでとりあえず試してみました。
ちなみに1点残念な事がありまして、どーやらwindows版safariの
提供が終了してしまったようで、win safariはfileReaderが使えないまま
最後を迎えてしまったようです。。。
input type="file"ってそーいえばデザインどーする?!
とちょっとググってみたら、透明にして重ねる!みたいな記事が
結構ヒット。やっぱり同じ悩みを持つ方は結構いるんだなと。
html
<ul> <li>写真にお絵かき<input type="file" id="fake" /></li> <li>・・・・</li> <li>・・・・</li> <li>・・・・</li> </ul>
css
li { line-height: 75px; position: relative; margin: 0 auto; width: 320px; } #fake { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }一応webkit系であればli全体がクリックできた
var tar = $("#illustMenu li"); //input type file、fileReader使える?? if(!window.FileReader || $('#fake').get(0).disabled) $(tar[0]).css('display', 'none'); $("#illustMenu li").bind("click", function() { scrollTo(0, 0); var index = $("#illustMenu li").index(this); var myImg = new Image(); if(!index) { var $fake = $('#fake').get(0); $fake.onchange = function() { var file = $fake.files[0]; if(!file.type.match('image.*')) { alert('画像以外は読込めません'); return; }; var fr = new FileReader(); fr.onload = function() { myImg.src = fr.result; callback(); }; fr.onerror = function() { alert('読込めませんでした'); }; fr.readAsDataURL(file); }; } else { myImg.src = "img/illust/" + index + ".png"; callback(); }; function callback() { myImg.onload = function() { var iw = myImg.width; var ih = myImg.height; if(!index) { ・・・・・ ・・・・・ }; if(W > 600 && !retina) { ctx.drawImage(myImg, 0, 0, iw, ih); } else { ctx.drawImage(myImg, 0, 0, iw/2, ih/2); }; }; }; });とりあえずfileReaderが使えるか?input type fileが使えるか?
ではiPhoneで確認。
問題なくファイル選択画面登場。
適当な写真を選択。
まったくもってきちんと描画されない、、、、。
縦、横もおかしい。
ググってググってまたググって。
そこでふと思い出したMobileSafariのリソース制限。
これかぁ。
canvasにリサイズして書き出したくても
どーにもきちんと読み込まれない。
これはやっぱりimageオブジェクトで読み込んだ時
おかしくなってるのか??
上限35メガピクセル。
iPhone4sのカメラは800万画素で8メガピクセル。
ただ2メガピクセル以上はうんたらかんたら。
よくわからん。
さらにcanvasの上限は2メガバイト。
よくわからん。
まず4sで撮影したデフォルト画像はcanvasに書き出した際
おかしなことになる。さらに縦・横認識していない。
しかしフォトストリームから読み込むと問題なく書き出され
縦・横も認識される。
iPad2で撮影したデフォルト画像はcanvasに書き出した際
きちんと書き出されるが縦・横が認識されていない?
ただiPad2で4sで撮影したフォトストリームの画像は
問題なく書き出され縦・横も認識された。
3GSではフォトストリームの画像もおかしなことに、、、。
うーんよくわからん。
おそらくそのRAMとリソース制限の関係でしょうか??
描きだし時にバグるのはしょうがないとして
なぜ縦・横を認識しない?
ググってみると画像にはExifという画像の様々なデータ
が書き込まれたものがあると。なるほど。
そんでそれはバイナリデータで抽出可能。
なんともめんどくさそう。
fileapiに出会った時これは一体何に使うんだ?
と思っていったreadAsArrayBuffer。
バイナリデータを読み込めます。
まさか早速お世話になるとは。
JPEG画像からExif情報を抽出する
未知な世界のバイナリ。
ということでとりあえず上のコードをお借りして
いったんExifデータを確認させていただくと、
しっかりorientation6又は1となってる。
これで分岐すればとりあえず対応はできそう。
そのうちバイナリの勉強でもしよう。
まともには使えませんがとりあえず実装してみました。
それとあまり関係ありませんがgetImageDataで取得した
imageDataオブジェクトをputImageDataで描き出す際
変換マトリックスを適用する方法ご存知の方いませんでしょうか??
回転させたいだけなんですが、、、。ご存知の方コメントいただけたら
うれしいです。
いつもいつも簡単に終わるかなと思って取り掛かるんですが、
予想外の時間がかかってしまいます。
いい加減他の勉強を始めなければ、、、