スポンサーサイト

2014.01.27 Monday

一定期間更新がないため広告を表示しています

  • -
  • -
  • -

iOS6がリリースされiPhone5が発売されました。

いままでスマホなんてまったく興味がなかったのに。

まったく興味がなかったので4の発売直前に

3GSを買ってからだんだんとiPhoneの魅力に、、、。

それ以来この発表が楽しみになってしまいました。

すごいなapple。

現在JB4Sを使用中ですが5は見送りま〜す。

欲しいですが。

ちなみにちょっと友達の5使わせてもらったんですが、

処理がメッチャ早い!そして軽い!すごい!

iOS6よりinput type="file"が使える!fileReaderも使える!

以下fileReaderに関するメモです。。


iPhoneってinput type="file"が使えなかったんですよね。


これ結構残念な仕様だなぁとずっと思ってました。


それがついに開放!


そしてこのブログでも長いことひっぱてますお絵かきアプリ、


以前作ってみた時、撮った写真にお絵かきできたらいいな、


と思ったのですが、


まぁ、まずファイルにアクセスできないし、ブラウザだけで


完結できないし、とか考えつつあきらめていたのですが、


iOS6にて両方いけるようになったのでとりあえず試してみました。


ちなみに1点残念な事がありまして、どーやらwindows版safariの


提供が終了してしまったようで、win safariはfileReaderが使えないまま


最後を迎えてしまったようです。。。


まずはinput type="file"のデザインをCSSでこっそり隠す

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全体がクリックできた

のですが他ブラウザは(あまり確認してませんが、、、)デフォルトの

ボタン部分をちゃんとクリックしないと認識できなかった為

かなり危険なデザインです。はい。


ファイルを選択してcanvasへ描き出す


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が使えるか?

使えれば「写真にお絵かき」メニューを表示する。

onchangeイベントにて以下実行。

fileapiにてファイルにアクセスしてfileReaderで読み込む。

readAsDataURL()メソッドでDataURLスキームに変換して読み込む。

そしてonloadイベントで画像サイズを調整してcanvasに描画。

OK。以外とあっさり。よかった。

PCで確認する分には。



ここからどっぷりはまりました、、、、。

では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で描き出す際


変換マトリックスを適用する方法ご存知の方いませんでしょうか??


回転させたいだけなんですが、、、。ご存知の方コメントいただけたら


うれしいです。


いつもいつも簡単に終わるかなと思って取り掛かるんですが、


予想外の時間がかかってしまいます。


いい加減他の勉強を始めなければ、、、



スポンサーサイト

2014.01.27 Monday

  • -
  • -
  • -

コメント
コメントする








   
この記事のトラックバックURL
トラックバック

calendar

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      
<< March 2024 >>

profile

last entry:2013/06/10

selected entries

categories

archives

recent comment

search this site.

others