撮影した画像を加工する
最後に、Canvas上に表示した撮影画像を加工してみましょう。第82回で作成したグレースケールフィルターを流用します。Canvas内容を操作する部分は共通ですので、プログラムはそのままです。
ここでは240×320サイズの画像加工しかしていないため、すぐに処理が終わりますが、撮影したオリジナル画像のまま処理すると時間がかかります。カメラで撮影した画像をグレースケール加工するプログラムがサンプル5です。
まず、「ファイルを選択」ボタンをタップしてカメラで撮影する
カメラで撮影する
撮影した画像がCanvasに表示されたら「グレースケールに変換」ボタンをタップ
撮影した画像がグレースケールに変換される。後はtoDataURL()を使ってローカルストレージに保存したり、サーバーに転送すればよい
■サンプル5
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content= "initial-scale=1">
<title>撮影した画像を加工</title>
</head>
<body>
<h1>撮影した画像を加工</h1>
<form>
<input type="file" accept="image/*;capture=camera" id="cameraImage">
<input type="button" value="グレースケールに変換" id="effect"></input>
</form>
<canvas id="myCanvas" width="240" height="320" style="border:1px solid black"></canvas>
<script>
// 撮影後に処理を開始
document.getElementById("cameraImage").addEventListener("change", function(){
// Canvasにカメラで撮影した画像を描画
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
var canvasW = canvasObj.width;
var canvasH = canvasObj.height;
var reader = new FileReader();
reader.onload = function(evt){
var imgObj = new Image();
imgObj.src = reader.result;
imgObj.onload = function(){
context.drawImage(imgObj,0,0, canvasObj.width, canvasObj.height);
var data = canvasObj.toDataURL();
document.getElementById("result").innerText = data;
}
}
var imageFile = document.getElementById("cameraImage").files[0];
reader.readAsDataURL(imageFile);
}, false);
// クリックしたらエフェクト処理を開始
document.getElementById("effect").addEventListener("click", function(){
var canvasObj = document.getElementById("myCanvas");
var context = canvasObj.getContext("2d");
var imageData = context.getImageData(0,0, canvasObj.width, canvasObj.height);
var pixelData = imageData.data; // ピクセルデータを読み出し
for(var y=0; y<canvasObj.height; y++){
for(var x=0; x<canvasObj.width; x++){
var pointer = (y * imageData.width + x ) * 4; // RGBαで4配列
var red = pixelData[pointer + 0];
var green = pixelData[pointer + 1];
var blue = pixelData[pointer + 2];
var gray = Math.floor(green * 0.6 + red * 0.3 + blue * 0.1);
pixelData[pointer + 0] = gray;
pixelData[pointer + 1] = gray;
pixelData[pointer + 2] = gray;
}
}
context.putImageData(imageData, 0, 0);
}, false);
</script>
</body>
</html>
なお、すでに撮影済みの画像をユーザーに選択させたい場合は以下のようにします。
<input type="file" accept="image/*" id="cameraImage">
accept属性でcaptureにmicrophoneを指定するとマイクからの録音、camcorderを指定するとビデオカメラも起動できます。
Android 4ではデバイスの機能を手軽に利用できるので、より幅広いWebアプリケーションを作成できます。Android 4によりHTMLとJavaScriptの可能性が広がったと言えるでしょう。
