画像にレトロ調のエフェクトをかけてみる
JavaScriptオープンソースライブラリが使える強み
Tizenは後発のOSとしてiOSやAndroidなどと比べた場合、やはりアプリ開発者の数では圧倒的な差があります。しかし、長い歴史のあるHTMLでアプリ開発ができること、とりわけ既存のJavaScriptのライブラリを利用できることがTizenの強みです。
Tizen Webアプリの標準的なフレームワークとして採用されているjQueryやjQueryMobileはもちろんのこと、CANVASエレメントの描画に特化したフレームワーク、例えばCreateJSやPixi.js、Processing.js、enchant.js、そしてWebGLを使うためのThree.jsなどを利用してアプリを開発していくことができます。また、JavaScriptでMVC設計モデルを実現するためのフレームワークであるBackbone.jsやKnockout.jsなどのライブラリを利用したアプリも今後でてくることでしょう。
この章では、vintageJSというIMAGEエレメントに対して直接レトロ調のエフェクトを適用することのできるオープンソースのライブラリを利用してみたいと思います。
vintageJS
今回vintageJSを利用した理由は、jQueryプラグインとしても配布されているので組み込むのが簡単、という点と、エフェクトのプリセットが最初から用意されているので手軽にエフェクトが楽しめるという点です。vintageJSは、GitHubで公開されています。
vintageJSのプリセットを含めた使い方としては、下記のようになります。
<script src="jquery.vintage.js"></script>
<script src="vintage.presets.js"></script>
<script>
var options = {
//処理開始時、終了時、エラー時の動作などを指定できる
onError: function() {
alert('ERROR');
}
};
$('img#yourImage').vintage(options, vintagePresets["sepia"]);
//引数を1つにするとエフェクトなしで初期化のみ行います
</script>
さらに、一度エフェクトが適用されたIMAGEエレメントには、属性値として追加操作の可能なAPIオブジェクトが保持されるので、エフェクトの変更やリセットなどの操作を追加的に行うことができます。
var vjsAPI = $("img#yourImage ").data("vintageJS");
//違うエフェクトを掛ける
vjsAPI.vintage(vintagePresets["greenish"]);
//リセットする
vjsAPI.reset();
//状態を保存する（リセットの戻り先やエフェクトを適用するオリジナルデータになる）
vjsAPI.apply();
アプリへの組み込み
それでは実際にアプリに組み込んでいきましょう。まずは、HTML部分にエフェクトごとのボタンを設置します。
<div data-role="page" id="two"> <!-- header --> <div data-role="content"> <!-- ここにカメラから取得した画像を表示する --> <img id="inputImage" style="width: 344px;height: 344px;"/> <div id="filters"> <button data-preset="normal">Normal</button> <button data-preset="vintage">Vintage</button> <button data-preset="sepia">Sepia</button> <button data-preset="greenish">Greenish</button> <button data-preset="reddish">Reddish</button> </div> </div> <!-- footer --> </div>
エフェクトの種類の情報は、BUTTONエレメントのdata-preset属性に記述しています。これはアプリケーション独自の情報をHTMLのエレメントに埋め込みたい場合に、「data-*」という名前で埋め込むことができるというHTML5の仕様で、jQueryを利用すれば下記のように簡単にデータの読み書きを行うことが可能です。
var preset = $("button#somebutton").data("preset");
$("button#somebutton").data("preset", "newPreset");
それではJavaScriptの実装に移ります。まず、画像がロードされた時の初期化を行います。
//CANVASを使って画像処理をした後、画像を表示する箇所
var inputImg = $("#inputImage").attr("src", canvas[0].toDataURL("image/png"));
//vintageJSの初期化オプション
var option = {
//出力データ形式を選択（JpegとPNGが指定できます）
mime : "image/png",
//処理開始時のハンドラ
onStart : function() {
console.log("onStart");
$.mobile.loading( 'show' )
},
//処理終了時のハンドラ
onStop : function() {
console.log("onStop");
$.mobile.loading( 'hide' )
},
//エラーハンドラ
onError : function() {
$.mobile.loading( 'hide' )
alert('ERROR');
}
}
//vintageJSでIMAGEエレメントを初期化する
inputImg.vintage(option).data('vintageJS').apply();
次に、ボタンを押した時のハンドラを実装していきます。
$("#filters button").click(function() {
var presetName = $(this).data("preset");
var vjsAPI = $("#inputImage").data("vintageJS");
if (vintagePresets[presetName]) {
vjsAPI.vintage(vintagePresets[presetName]);
} else {
//presetが見つからない場合はリセットする(normalなど)
vjsAPI.reset();
}
})
エフェクトを掛ける実装は以上になります。このように、ライブラリを上手に使いこなすことで、機能の追加がとても簡単に行えることがお分かりいただけたのではないでしょうか。
