調整して画面に表示
次に、取得した画像データを縮小したり回転したりする処理を見てみましょう。
手順としてはサイズを指定したCANVASエレメントに画像を回転してかつ縮小して貼り付ける処理をします。カメラで撮影した画像の回転情報はJavaScriptからJpeg画像のExif情報を読み出します。JavaScriptからJpeg画像のExif情報を読み出すライブラリはいくつか存在しますが、今回は回転（Orientation情報）のみを取得したいので、下記で公開されているシンプルなメソッド「getOrientation」を利用させていただくことにします。
- 「JPEGからJavascriptでEXIFのOrientation情報のみを取得する」（egashira.jp）
それでは、実際にCANVASを使って画像を処理していくソースを見てみましょう。
function onReadImage(e) {
var imageSrc = e.target.result;
/**
* Case2. 画像をCanvasを利用して縮小、回転し、文字を載せて貼り付ける
*/
// Exif情報からOrientationを取得
var orientation = getOrientation(imageSrc) || 1;
console.log(orientation)
// 一時的なIMAGEエレメントを作成し、一時的なCANVASで画像処理をしてIMGを出力する
var onLoadImageElement = function(e) {
var imgEl = e.target;
// 画像の本来の解像度を取得
var w = imgEl.naturalWidth;
var h = imgEl.naturalHeight;
// canvasの解像度を指定
var canvasWidth = 400;
var canvasHeight = 400;
var canvas = $("<canvas>").attr({
width : canvasWidth,
height : canvasHeight
})
// canvasの描画コンテキストを取得
var context = canvas[0].getContext('2d');
// これから変更する回転状態をいったん保存
context.save();
switch (orientation) {
case 3:
// 180 rotate left
context.translate(canvasWidth, canvasHeight);
context.rotate(Math.PI);
break;
case 6:
// 90 rotate right
context.rotate(0.5 * Math.PI);
context.translate(0, -canvasHeight);
break;
case 8:
// 90 rotate left
context.rotate(-0.5 * Math.PI);
context.translate(-canvasWidth, 0);
break;
default:
}
// canvasの幅に短辺を合わせて中心に描画する処理
if (w > h) {
context.drawImage(imgEl, (w - h) / 2, 0, h, h, 0, 0,
canvasWidth, canvasHeight)
} else {
context.drawImage(imgEl, 0, (h - w) / 2, w, w, 0, 0,
canvasWidth, canvasHeight)
}
// 文字などを上書きするために回転状態を解除する
context.restore();
// 文字などを張り付けていく
var caption = "#MyTizenCameraApp";
context.font = "32px 'Tizen, Helvetica'";
context.lineWidth = 5;
context.strokeStyle = "#333333";
context.strokeText(caption, 30, canvasHeight - 30);
context.fillStyle = "#dbd0e6";
context.fillText(caption, 30, canvasHeight - 30);
//画像を出力する
$("#inputImage").attr("src", canvas[0].toDataURL("image/png"));
/**
* ページ2へ移動
*/
$.mobile.changePage("#two");
}
$("<img>").load(onLoadImageElement).attr("src", imageSrc);
}
以上のようにすることで、カメラから取得した画像を適切な回転と解像度で表示することができます。
まとめ
本稿ではTizen SDK 2.2についての解説と、カメラアプリを作るにあたってのカメラ画像の取得とその画像処理、表示までを解説しました。HTMLの独特の書き方に慣れていない方は、若干戸惑ってしまう部分もあるかもしれません。しかし、慣れてしまえば他のOSのアプリケーションに比べ、非常に短いコードでアプリケーションが作成できることがお分かりになるかと思います。
また、アプリケーションの書き方が標準化されているので、他OSや今後のOSのバージョンアップなどによる変更にも強くなっています。コンパイルを挟む必要もないので、レイアウトの確認やデバッグも高速で行うことが可能です。また、HTML部分とプログラム部分の自由な切り分けができるため、プログラマーとデザイナーでの分業がしやすいことも、非常に魅力的です。
次回は、今回紹介したカメラアプリの続きとして、豊富なオープンソースのJavaScriptライブラリを駆使した画像処理やTwitter投稿、また、DeviceAPIを用いてのファイルの読み書きやギャラリーへの画像登録などの解説をしていきたいと思います。
