JavaScriptで画像加工アプリを作ろうぜ！：HTML5アプリ作ろうぜ！（4）（2/2 ページ）

» 2012年08月07日 00時00分公開

[山崎大助，魚津システム]

前のページへ 1|2 　　　　　　

「ガウス」、「シャープ」の2つを使ってみましょう

　ここからは、HTML5「スライダー」rangeを使用します。

1．sample3ファイルをダウンロードしてください。

　[ダウンロード　＞＞　sample3.zip　]

　※右クリック「リンク先を別名で保存」してください。

2．sample3.zipを解凍すると「sample3」フォルダが作成されます。

　以下の4ファイルがフォルダ内にあることを確認してください。


	index.html	ムービーページ
	pixastic.custom.js	JavaScriptライブラリ
	jquery.js	JavaScriptライブラリ
		加工用イメージ

3．フォルダ内の[index.html]を、Safari、Chrome（一部機能が使えません）のブラウザで開いてください。

4．下記画面が表示されます。

　シャープ、ガウスのスライダーを動かしてください（リロードすると初期化されます）。

■サンプルの解説

1．index.htmlファイルをエディタで開いてください。

2．42行目～53行目（sample3.html）

 //------------------------------------------------------------------
    //スライダー：[Sharp]
    var modSharp = function () {
        Pixastic.process(document.getElementById("demoimage"), "sharpen", {
            amount : parseFloat($("#sharp").val())
        });
    };	
    //スライダー：Blur（ガウス）
    var modblur = function () {
        Pixastic.process(document.getElementById("demoimage"), "blurfast", {
            amount : parseFloat($("#blur").val())
        });
    };

3．上記コードの説明

シャープ：「Pixastic.process(canvas要素, "sharpen"); 」と、「amount : parseFloat($( "#sharp").val()) 」の2行の記述でOK
ガウス　：「Pixastic.process(canvas要素, "blurfast"); 」と、「amount : parseFloat($( "#blur").val()) 」の2行の記述でOK

　スライダーを使うことで、効果を設定しやすくできます。まだまだブラウザによって使えるものは少ないですが、ぜひ試してください。

加工画像をダウンロードできるようにする！

1．sample4ファイルをダウンロードしてください。

　[ ダウンロード＞＞ sample4．zip ]

　※右クリック「リンク先を別名で保存」してください。

2．sample4.zipを解凍すると「sample4」フォルダが作成されます。

　以下の6ファイルがフォルダ内にあることを確認してください。


	index.html	ムービーページ
	pixastic.custom.js	JavaScriptライブラリ
	jquery.js	JavaScriptライブラリ
	base64.js	JavaScriptライブラリ
	canvas2image.js	JavaScriptライブラリ
		加工用イメージ

　※「canvas2image.js, base64.js」の2ファイルが画像ダウンロードに必要なファイルです。

3．フォルダ内の[ index.html ]をSafari、Chrome（一部機能が使えません）”のブラウザで開いてください。

4．下記画面が表示されます。

　※画像内、中央に「PNG ＞ OUTPUT」と表示されてます。画像の形式を選択肢、OUTPUTボタンで画像をダウンロードできるようになります。（拡張子の付かないファイルでダウンロードされますので、ダウンロード後に拡張子を付けてください）。

■サンプルの解説

1．index.htmlファイルをエディタで開いてください。

2．68行目～83行目（sample4.html）

 //------------------------------------------------------------------
    // FILE保存処理:処理中データOUT
    var nfSaveData = function (){
　　　　　　　//画像形式取得（PNG、JPG、BMPどれかを取得）
        var str = document.getElementById('ntype').value;
	//Canvas要素
        var can = document.getElementById("demoimage");
        //ファイルダウンロード関数実行
        _imgOutPutSwitch(str,can);
    };
    // ダウンロード処理（画像形式によって実行処理を切り替える）
    var _imgOutPutSwitch = function(str,can){
        if("PNG"==str){            //PNGだったらここ
            Canvas2Image.saveAsPNG(can, false, 400, 300);
        }else if("JPG"==str){    //JPGだったらここ
            Canvas2Image.saveAsJPEG(can, false,400, 300);
        }else{                              //その他だったらBMP
            Canvas2Image.saveAsBMP(can, false, 400, 300);
        }
    };

　上記68～83でしかファイルダウンロード処理を記述していないし、やっていることもとてもシンプルです。PNG、JPG、BMPどれかを選択、その画像形式を見て形式に合ったダウンロード処理が実行されるといった、明解な作りとなります。

　ぜひ、サンプルをうまく利用して、皆さんのアプリ開発に生かしていただければ幸いです。

サンプルコードの利用に関して

　サンプルコードは自由にお使いください。

終わりに

　Pixasticライブラリは、画像に簡単に手を加えられる数少ないお手軽JavaScriptライブラリだと思います。ただし、どんなライブラリにも弱点のようなものはあるものです。その弱点を理解して使ってください。その弱点とは、1つ前に戻れないということです。画像に手を加えて、「あっ間違った！」となっても、戻れないのです（最初に戻すことは可能）。自分自身で機能を追加し、アレンジを加える必要があります。

　例えばですが、IndexDB、LocalStrageなどに画像の履歴を残すようにし、1つ前に戻す機能を作ることで弱点は克服できると考えます。実際に、私が作っている画像編集アプリ（このライブラリを素に作成している途中のアプリ）では、LocalStrageを履歴管理として使ってます。しかし、すぐに利用制限の5メガを使い切ってしまうのが難点です。やはり何代もの履歴を保存させるにはIndexDBを使うべきでしょう。

　また、画像の上にテキストを重ねることで「画像＆文字」とすることも可能でしょう。

　どのような優秀なライブラリでも完ぺきなものはありません。アイデアで克服し、より良いものとして使えるように、付き合っていくことが大事です。

　内容的には、JavaScript中級レベルの方が見れば、すぐに使える内容だと思います。

　今後は、HTML5のAPI群を使用した開発では「JavaScript」はマストな技術になりますので、苦手な方もぜひ今のうちに習得することをオススメします。

　JavaScriptは、今後、必ずあなたの強い味方になるはずです。

著者紹介

山崎　大助（魚津システム　所属）

現在はデジタルハリウッド講師を務める他、SoftwareDesign、日経ソフトウエア、ITPro、WebCreatorsなどのWeb業界誌での執筆。日経PC21「名作フリーソフトを訪ねて」では自ら開発した「AIRNote！」が選ばれ掲載。impress.jsを簡単に作成する「Impress.js design」アプリもGithubにて公開してます。最近ではHTML5やPHP関連のセミナー・勉強会を開催。＠IT「HTML5アプリ作ろうぜ！」の連載記事を執筆。

「次回」へ

「HTML5アプリ作ろうぜ！」バックナンバー