このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第26回

Photoshopを超えた!?BridgeとJSで作る画像フィルター

2010年02月22日 11時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第26回です。過去の記事も合わせてご覧ください。

Adobe Bridge

 「Adobe Creative Suite」に付属する「Adobe Bridge」は、JavaScriptを使うことで単なる画像管理ソフトから自動処理ツールへと大化けします。前回まではWebサーバーやPhotoshopとの連携方法を解説してきましたが、今回はBridge単体でできる画像処理に目を向けてみましょう。

■シリーズラインナップ


画像キャンバスを作成する

 Bridgeは、ピクセル単位の画像処理に対応しています。そこで簡単なサンプルとして、今回はオリジナルの画像フィルターを作成します。

 本連載の第3回ではPhotoshopのJavaScriptで画像フィルターを作成しましたが、処理速度が遅く、実用性には難がありました。そのため、「どうせBridgeのJavaScriptも遅くて使えないんでしょ?」と心配される方もいるかもしれません。

 Bridgeにはピクセルデータを読み書きするための専用の命令が用意されているので、PhotoshopのJavaScriptとは比較にならないほど高速です。画像処理ソフトのPhotoshopよりもピクセル処理が得意というのは妙な気もしますが、Bridgeなら十分実用的な速度で動作します。さっそく、Bridgeを使って画像処理のスクリプトを書いてみましょう。

 最初に、画像キャンバスを作成します。BridgeのJavaScriptでは、new BitmapData()で新規キャンバスを作成できます。new BitmapData()は引数の数によって動作が異なり、引数が2つの場合は、第1引数が横幅(ピクセル数)、第2引数が縦幅になります。以下の例では320×240ピクセルの画像が作成されます。


var myCanvas = new BitmapData(320, 240);


 引数がファイルオブジェクト1つの場合は、ファイルオブジェクトで指定されている画像ファイルが開かれ、そのまま画像キャンバスとして使えます。


var myCanvas = new BitmapData(new File("~/sample.jpg"));


 このほか、new BitmapData()は背景色などの細かな指定ができますが、環境によってはうまく動かないことがあります。通常はこの2つの指定で十分でしょう。

 次ページはいよいよフィルター処理です。

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング