古籏一浩のJavaScriptラボ ― 第26回
Photoshopを超えた!?BridgeとJSで作る画像フィルター
2010年02月22日 11時00分更新
※この記事は「古籏一浩のJavaScriptラボ」の第26回です。過去の記事も合わせてご覧ください。
 |
|---|
「Adobe Creative Suite」に付属する「Adobe Bridge」は、JavaScriptを使うことで単なる画像管理ソフトから自動処理ツールへと大化けします。前回まではWebサーバーやPhotoshopとの連携方法を解説してきましたが、今回はBridge単体でできる画像処理に目を向けてみましょう。
■シリーズラインナップ
- 第1回 Webサーバーのデータを取得
- 第2回 RSS(XML)の処理
- 第3回 BridgeからPhotoshopのJavaScriptを実行
- 第4回 Photoshopで作成した画像をFTP転送
- 第5回 Bridgeで画像フィルタを作成（この記事）
- 第6回 GUI (グラフィカルユーザーインターフェース）の処理
画像キャンバスを作成する
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つの指定で十分でしょう。
次ページはいよいよフィルター処理です。
この連載の記事
- 第53回 Mac用ウィジェットをHTML/CSSで自作
- 第52回 Web技術で作るDashboardウィジェット開発入門
- 第51回 iOS 4.2×localStorageで作るGPSレコーダー
- 第50回 HTML5 SVGで作るシューティングゲーム
- 第49回 HTML5のInline SVGをJavaScriptで操作
- 第48回 HTML5で注目！インラインSVGの使い方
- 第47回 iOS 4.2の新機能で作るHTML5+JSアプリ
- 第46回 JavaScriptでEPUBビューアーを自作してみた
- 第45回 Audio Data APIでブラウザーをシーケンサーに！
- 第44回 Firefoxでソフトシンセも作れるAudio Data APIの使い方
- この連載の一覧へ
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
