Drupal で画像にさまざまな効果を付加する「画像スタイル」のエフェクト

こんにちは。プログラマーの山中です。

今回は Drupal の画像スタイルのエフェクトについて説明いたします。 画像スタイルとは画像のリサイズ・尺度変更・トリミング・回転・グレースケール化などなど... 画像に何かしらの処理を加えて別画像を生成する機能のことです。

画像スタイルでできること

まずはじめに画像スタイルについてかんたんに説明します。

Drupal 7 での画像スタイル機能はコアの Image モジュールが提供するもので、通常の方法でインストールされたDrupalであれば別途何かをインストールする必要なくすぐに使い始めることができます。 ノードのフィールド画像や Views での画像一覧などを表示する際に、アップロードされた「元画像」ではなく何らかの画像処理が施された「加工画像」を使用することができます。

画像スタイルでは以下にあげるような「エフェクト」と呼ばれる効果を使うことができます。

• トリミング
• グレースケール化
• リサイズ
• 回転
• 尺度
• 拡縮とトリミング

これらを個別に使うこともできますが、複数のエフェクトを順番にかけあわせて使うことも可能です。 「グレースケール化してリサイズする」といったことも設定によって自動で行うことができます。

画像スタイルのエフェクトの動き

ではここからは、次の幅480px × 高さ320px の画像を使って、上でご紹介した各種エフェクトの具体的なサンプルをお見せしたいと思います。

トリミング

指定した位置とサイズで画像を切り抜きます。

上の例では以下の図のようにアンカー(トリミング位置)を右中央に設定しています。アンカーとトリミング後の幅と高さを指定すれば、さまざまなタイプのトリミングに対応することができます。

グレースケール化

画像を段階的な白黒画像に変換します。

リサイズ

指定した縦横のサイズに画像の拡大・縮小を行います。画像そのものの幅と高さを変更するため、設定によっては元の画像のアスペクト比は維持されません。

回転

画像の中心を回転軸として画像を回転します。

ここでは以下の図のように設定しています。png画像なら 背景色 の部分を空欄に設定にすると回転した時に空いた部分は透過します。

尺度

元の画像アスペクト比はそのままで指定したサイズに画像サイズを変更します。

拡縮とトリミング

尺度とトリミングの掛け合わせです。

トリミングの位置は真ん中固定ですが、画像本来の比率を変えずに特定の幅・高さの画像を生成するので「画像の幅と高さを固定にしたいけど画像本来の比率は変えたくない」といった場合に有効です。

画像スタイルのエフェクトを追加する ImageCache Actions モジュール

最後に、画像スタイルのエフェクトを追加する ImageCache Actions モジュールも簡単に紹介します。

ImageCache Actions モジュールは、画像スタイルのエフェクトを追加するモジュール群です。 エフェクトの種類ごとにモジュール化されているので ImageCache Actions モジュールと使用したいエフェクトを提供するモジュールを有効にして使用します。

ImageCache Actions モジュールでは以下のエフェクトが用意されています。

モジュール名	エフェクト
imagecache_autorotate	Autorotate
imagecache_canvasactions	Aspect switcher Underlay (background) Define canvas Overlay (watermark) Image mask Resize (percent) Rounded Corners Overlay: source image to canvas
imagecache_coloractions	Brightness Color Shift Change file format Negative Image Posterize Adjust Levels Alpha Transparency Color Overlay Desaturate Alpha
imagecache_customactions	Custom action Subroutine

各エフェクトが実際にどんなものなのかはぜひ実際に使用して確かめてください :)