DraftPadでカメラロールの写真をdataURL化する方法
カメラロールの画像はテキスト化できるのです。
2012年09月30日以前、HTML5でカメラやGPSなどスマートフォンならではの機能がどこまで使えるのか調べました。最近、iPhone5を買ったので今度はiOS6のSafariでサポートされたHTM...
draftpad://self/web?source=<meta name=viewport content=initial-scale=1><title>dataURL</title><img id=image width=300><br><textarea id=info style=width:300; placeholder=写真を選んでください></textarea><hr><input id=photo type=file><script>function main(x){photo.onchange=function(){data=new FileReader();data.readAsDataURL(photo.files[0]);data.onload=function(){image.src=info.value=data.result}}}location=%22draftpad:///webdelegate?load=main%26unload=function(){len=image.src.length;if(len>0 %2526%2526 len<22000){draftpad.insert(image.src)}else{draftpad.insert(\"size: \"+len)}}%22</script>登録リンクはこちら→ http://tinyurl.com/d7h5ek3
カスタマイズしてるうち、簡略化しちゃいました。このアシストを起動すると、画像選択画面になります。「Choose File」でカメラロールから写真を取得。するとその下にdataで始まる文字列が現れます。これがdataURL。そのままSafariのURL欄に貼り付けると写真が表示される。テキストなんですが、画像情報になってます。
しかもアシストを閉じるとき、サイズが20KBならDraftPadの編集画面に貼りつくようにしました。簡単なアイコンなら、imgタグのsrcにこのdataURLを書くだけ。20KBを超えるとDraftPadが落ちるときがあるので、そのときはdataURLのサイズが表示されます。
サイズ変更はこのアプリ。保存時にCustomで数値を削るだけ。
Pixlr Express 1.1.1
時間がないので、とりあえず紹介だけ。リンクや画像が埋め込めるようになりました。それって、凄いじゃん。変数としてtitleやauthorも使えるので、前回のアシストがそのまま使えます。iPadで電子書籍...
こんな感じ。
<img src="data:.....">
上記のようにimgタグで書けば写真が表示されます。なかなか面白いなあ、と感心してたのですが、なぜかiPod touchだとうまく行かないのです。アシストがきちんと動かず、画面がリセットされてしまう。同じiOS6.1.3なんだけど、機種によって微妙に内部処理が異なるらしい。別バージョンを考えてみますので、気長にお待ちください。
(追記)
