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

JavaScriptで画像加工アプリを作ろうぜ!HTML5アプリ作ろうぜ!(4)(2/2 ページ)

[山崎大助,魚津システム]
前のページへ 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アプリ作ろうぜ!」の連載記事を執筆。



前のページへ 1|2       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。