File APIで画像を読み出す
サンプル1でカメラによる撮影はできましたが、ブラウザー上には画像のファイル名が表示されているだけです。画像を加工するには、内部に保存したファイルを読み出す必要があります。
Android 4の標準ブラウザーはFile APIにも対応しているので、ファイルはFile APIを使って読み出せます。File APIに関しては過去の連載で解説していますので参照してください。
- 第41回 File APIでブラウザーーからローカルファイルを操作
- http://ascii.jp/elem/000/000/559/559105/
第41回の記事ではテキストファイルとバイナリファイルの読み出しのみ解説していますが、画像ファイルを読み出してdata:形式にするreadAsDataURL()メソッドもあります。readAsDataURL()メソッドは読み出したいファイルオブジェクトを引数に指定します。
カメラで撮影が完了した後に画像を表示するプログラムがサンプル2です。撮影が完了したタイミングで発生するchangeイベントを捕捉し、ページにimg要素を追加してdata:形式で画像を表示する処理を実行します。カメラの画素数が多いので、そのままページに貼り付けると大きな画像になります。
「ファイルを選択」ボタンをタップする
カメラが起動するので撮影すると……
撮影した画像がページの末尾に追加される
■サンプル2
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1, user-scalable=no">
<title>カメラから取り込んだ画像を表示する</title>
</head>
<body>
<h1>カメラから取り込んだ画像を表示する</h1>
<form>
<input type="file" accept="image/*;capture=camera" id="cameraImage">
</form>
<script>
// 撮影後に処理を開始
document.getElementById("cameraImage").addEventListener("change", function(){
var reader = new FileReader();
reader.onload = function(evt){
// img要素を生成してページの末尾に追加
var cameraImage = document.createElement("img");
document.body.appendChild(cameraImage);
cameraImage.src = reader.result; // カメラ画像をsrcプロパティに入れるだけでOK
}
var imageFile = document.getElementById("cameraImage").files[0];
reader.readAsDataURL(imageFile);
}, false);
</script>
</body>
</html>
