完全網羅!Intervention Image(PHP)で画像を編集する全実例

こんにちは❗フリーランス・コンサルタント&エンジニアの 九保すこひ です。

さてさて、前回の記事ではメール開封チェックの仕組みを紹介しましたが、その中でIntervention Imageという簡単に画像を扱うことができるパッケージを使いました。

元々PHPにはGDと呼ばれる画像ライブラリが存在していますが、これがなかなか記述にクセがあって扱いにくい部分があったりします。Intervention Imageは、このGD(ImageMagickもサポートしています)を直感的に使えるようにしてくれるパッケージです。

そして、このブログではよくLaravel関連の記事を書いていますが、Intervention ImageはLaravelでの利用も想定されているものの、純粋なPHPライブラリなのでより多くの環境でも利用ができるはずです。

ということで、今回は「PHPで画像を扱うならこれ!」といっても言い過ぎではないIntervention Imageの全実例を紹介します。

目次

Intervention Imageをインストールする

LaravelでIntervention Imageを使えるようにするには、以下のコマンド一発でOKです。

composer require intervention/image

※ ちなみに、Laravel 5.4 以下の場合はPackage Auto-Discoveryがないので手動でconfig/app.phpにパッケージを登録する必要があります。

'providers' => [
    // 省略
    Intervention\Image\ImageServiceProvider::class
]
'aliases' => [
    // 省略
    'Image' => Intervention\Image\Facades\Image::class
]

これで\Image::****()として呼び出すことができます。

では、今回は以下の画像を使って実際に画像の編集をしていきます。

(smile.png: 縦256ピクセル x 横256ピクセル)

基本的な使い方

画像を読み込む: make()

画像をIntervention Imageに読み込ませるためにはmake()を使います。

$img = \Image::make(***);

なお、このmake()の引数は以下の色々な形式に対応していて、このあたりもIntervention Imageが優れている部分といっていいでしょう。

  • 画像のパス
  • 画像のURL
  • 画像データ(バイナリ)
  • data URLの画像データ
  • GDのリソース
  • ImageMagickのインスタンス
  • SplFileInfoのインスタンス
  • UploadedFileのインスタンス

ではひとつひとつ例を見ていきましょう。

画像のパス

例えば、storageフォルダ以下に保存した画像を読み込む場合です。

$path = storage_path('app/images/smile.png');
$img = \Image::make($path);

画像のURL

URLを指定すると、直接インターネット上の画像を読み込むことができます。

$url = 'https://example.com/images/smile.png';
$img = \Image::make($url);

※ 実際にはこのURLは存在していません。

画像データ(バイナリ)

$handle = fopen($path, 'rb');
$binary_data = fread($handle, filesize($path));
fclose($handle);

$img = \Image::make($binary_data);

data URLの画像データ

$data = file_get_contents($path);
$data_url = 'data:image/png;base64,'. base64_encode($data);

$img = \Image::make($data_url);

GDのリソース

$data = imagecreatefrompng($path);
$img = \Image::make($data);

※ ただし、ImageMagickを使う設定の場合は利用できません。

ImageMagickのインスタンス

$imagick = new \Imagick();
$imagick->readImage($path);

$img = \Image::make($imagick);

※ ただし、ImageMagickを使う設定の場合のみ利用できます。Intervention ImageはデフォルトでGDを使うようになっていますが、ImageMagickへの変更したい場合は、ImageMagickを使うを参照してください。

SplFileInfoのインスタンス

$fileinfo = new \SplFileInfo($path);
$img = \Image::make($fileinfo);

UploadedFileのインスタンス

SymfonyUploadedFileインスタンス(つまり、それを拡張しているLaravelのUploadedFileも使えます)で画像を読み込むことができます。

※ さらに言うと、上記2つのUploadedFileSplFileInfoを拡張したクラスです。

$photo = $request->file('photo');
$img = \Image::make($photo);

画像を保存する: save()

画像を保存する場合はsave()を使いましょう。
(つまり、回転などの編集をしただけでは、画像は保存されません)

$path = storage_path('app/images/smile.png');
$img = \Image::make($path);

// ここで回転などの編集

$save_path = storage_path('app/images/smile_2.png');
$img->save($save_path);

実際にやってみると以下のようになります。

(実行前)

(実行後)

なお、jpeg画像として保存する場合は、第2引数で画質を指定することができます。(pngでは形式上使えません)

$img->save('test.jpg', 30); // デフォルトは「90」

この場合の画質は以下のようになります。

  • 0 ・・・ 一番画質が低い
  • 100 ・・・ 一番画質が高い

実際に保存した画像。
左が0で右が100です。

  

画像を編集する

画像をぼやけさせる: blur()

画像を不鮮明にする場合はblue()を使います。

$img->blur(80); // 0〜100

なお、指定する数値は以下のようになっています。

  • 0 ・・・ ほとんどぼやけさせない
  • 100 ・・・ 最大限ぼやけさせる

実際の例は以下になります。
左が0で、右が100です。

 

鮮明にする(シャープ): sharpen()

$img->sharpen(50); // 0〜100

指定する数値は以下のようになっています。

  • 0 ・・・ ほとんどシャープしない
  • 100 ・・・ 最大限シャープする

実際に保存した画像です。

画像の明るさを変更する: brightness()

画像をより明るく、もしくはより暗くすることができます。

$img->brightness(50); // -100〜100

なお、指定する数値は以下のようになっています。

  • -100 ・・・ 最大限暗くする
  • 100 ・・・ 最大限明るくする

実際の例は以下になります。
左が-50で、右が50です。

 

※ ちなみに最大限の-100100だと真っ黒と真っ白の画像になりました。

画像の色調を変える: colorize()

例えば、例の全体的に赤っぽいsmile.pngを青い色調に変更する場合です。

$r = -100; // 赤を100取る(最大)
$g = 0;    // 緑はそのまま
$b = 100;  // 青を100追加(最大)

$img->colorize($r, $g, $b);

なお、各RGBで指定できる数値は以下のようになっています。

  • -100 ・・・ 最大限その色を取り除く
  • 100 ・・・ 最大限その色を追加する

左が元画像で、右が色調を変更した画像です。

 

コントラストを変更する: contrast()

画像のコントラストを変更する場合は、数値と一緒にcontrast()を使います。

$img->contrast(50); // -100〜100

なお、各RGBで指定できる数値は以下のようになっています。

  • -100 ・・・ 最大限コントラストを減らす
  • 100 ・・・ 最大限コントラストを増やす

左がコントラスト-50で、右が50の画像です。

 

画像の不要な部分を取り除く(トリミング): crop()

例えば、画像の中心部分だけの少し小さな画像を作りたい場合は以下のようにします。

$width = 200;
$height = 200;
$x = 50;
$y = 50;

$img->crop($width, $height, $x, $y);

実際に画像を保存するとこうなります。

つまり、以下のような形で画像を切り抜いていることになります。

※ ちなみにX,Y座標は省略することができ、その場合はどちらも0が適用されます。

$img->crop($width, $height);

左右、上下を入れ替える: flip()

例えば、画像の右と左(もしくは上と下)を鏡に写り込んだように逆にしたい場合です。

左右を入れ替える

$img->flip(); // 左右を入れ替える

実行結果はこうなります。
左が元画像で、右が左右を入れ替えた画像になります。

 

ちなみに以下のようにしても同じです。

$img->flip('h');

上下を入れ替える

$img->flip('v'); // 上下を入れ替える

左が元画像で、右が上下を入れ替えた画像になります。

vはvertical(垂直の)、hはhorizontal(水平の)の頭文字です。

サイズを変更する: resize()

パターンがいくつかあるので、ひとつずつ紹介していきます。
元画像は以下になります。(256×256ピクセル)

縦横の長さを指定してリサイズ

$width = 200;
$height = 100;
$img->resize($width, $height);

横の長さだけを変更する(高さはそのまま)

$width = 200;
$img->resize($width, null); // 高さはそのまま

縦の長さだけを変更する(横幅はそのまま)

$height = 200;
$img->resize(null, $height); // 横幅はそのまま

縦横比を保持したまま縦・横を変更する

// 横幅を指定する。高さは自動調整
$width = 200;
$img->resize($width, null, function($constraint){

    $constraint->aspectRatio();

});

// 高さを指定する。横幅は自動調整
$height = 200;
$img->resize(null, $height, function($constraint){

    $constraint->aspectRatio();

});

※ なお、第3引数の中でupsize()を呼べば、サイズが大きくなることを無視することができます。(小さいが画像が大きくなるとぼやけてしまうため)

$img->resize(null, $height, function($constraint){

    $constraint->upsize();

});

キャンバスのサイズを変更する: resizeCanvas()

例えば、画像の内容はそのままで画像のキャンバス・サイズを変更したい場合です。

元画像は以下になります。(256×256ピクセルのPNG画像)

縦横の長さを指定する

$width = 200;
$height = 150;
$img->resizeCanvas($width, $height);

横の長さだけ指定する

$width = 200;
$img->resizeCanvas($width, null); // 高さはそのまま

縦の長さだけ指定する

$height = 150;
$img->resizeCanvas(null, $height); // 横幅はそのまま

リサイズする基準点を指定する

$width = 200;
$height = 200;
$img->resizeCanvas($width, $height, 'bottom-right');

相対的な位置でリサイズする

$width = 100;
$height = 100;
$img->resizeCanvas($width, $height, 'bottom-right', true);

※追加された部分は透過になります。

最適なサイズへ変更する: fit()

例えば、単純なリサイズではなく、画像の中身が歪まないように150×100ピクセルの画像がつくりたい場合です。

$width = 150;
$height = 100;
$img->fit($width, $height);

実際の画像は以下になります。
左が元画像(256×256ピクセル)、右がサイズ変更した画像(150×100ピクセル)です。

 ➜ 

つまり、fit()が行う手順は以下になります。

  1. $width$heightの比率で画像を切り抜く
  2. サイズ変更

ちなみに$heightは省略することができて、その場合は、$width$heightもその指定した長さになります。

$img->fit(100); // 100x100になる

ただし、もし元の画像が小さい場合は画像が大きくなってぼやけてしまうことになります。これを防ぐ(つまり、そのままのサイズにしておく)ためにはupsize()を使いましょう。

$img->fit(300, 200, function($constraint){

    $constraint->upsize(); // 大きくなるのを防止

});

左がupsize()を使わなかった場合、右が使った場合です。

 

なお、第4引数ではどこを基準にして切り抜くかを指定することができ、例えば右下を基準として切り抜く場合は以下のようになります。

$img->fit(150, 100, null, 'bottom-right');

左が元画像で、右がサイズ変更した画像です。

 ➜ 

指定できる基準位置は以下の9つです。

  • top-left ・・・左上
  • top ・・・ 上
  • top-right ・・・ 右上
  • left ・・・ 左
  • center ・・・ 中心。初期値
  • right ・・・ 右
  • bottom-left ・・・ 左下
  • bottom ・・・ 下
  • bottom-right ・・・ 右下

幅・高さを基準としてサイズ変更する: widen(), heighten()

例えば、縦横比率はそのままで 256 x 256ピクセルの画像の横幅を100ピクセルに変更したい場合です。

$img->widen(100);    // 横幅を基準としてサイズ変更
$img->heighten(100); // 高さを基準としてサイズ変更

左が元画像、右がサイズ変更した画像です。

 ➜ 

ただし、このままでは元画像の方が小さい場合でも必ずサイズ変更してしまいます。しかし、そうなってしまうと画像がぼやけてしますことになります。そこで、もしサイズが元よりも大きくなってしまうことを防ぐためにupsize()を使うこともできます。

// 横幅を基準
$img->widen(500, function ($constraint) {

    $constraint->upsize();

});

// 高さを基準
$img->highten(500, function ($constraint) {

    $constraint->upsize();

});

回転する: rotate()

例えば、右に45度回転させたい場合です。

$img->rotate(-45); // 右に45度回転

※ 直感的には時計回りですが、半時計回りが基準になっています。

また、第2引数に色を指定すると、回転で背景を塗りつぶすことができます。

$img->rotate(-45, '#ccc'); // 背景をグレーにする

 

画像の上に画像を挿入する: insert()

例えば、以下の海の写真に笑顔画像を合成してみましょう。

$sea_path = storage_path('app/images/sea.jpg');
$sea_img = \Image::make($sea_path);
$smile_path = storage_path('app/images/smile_small.png');
$smile_img = \Image::make($smile_path);

$sea_img->insert($smile_img); // 海に笑顔を挿入

実行結果はこうなります。

なお、第2、3、4引数で挿入する位置を指定することもできます。

$position = 'bottom-right'; // 右下基準
$x = 10;
$y = 20;
$sea_img->insert($smile_img, $position, $x, $y);

指定できる$positionは以下の9つです。

  • top-left ・・・ 左上(初期状態)
  • top ・・・ 上
  • top-right ・・・ 右上
  • left ・・・ 左
  • center ・・・ 中心
  • right ・・・ 右
  • bottom-left ・・・ 左下
  • bottom ・・・ 下
  • bottom-right ・・・ 右下

実行結果はこうなります。

モザイク処理をする: pixelate()

$img->pixelate(10); // 数値が大きいほどモザイク処理がきつくなる

実際に保存した画像です。
左が5で、右が10でモザイク処理した画像です。

 

ガンマ補正する: gamma()

$img->gamma(2.5);

左が元画像、右がガンマ補正した画像です。

 ➜ 

グレースケール化する: greyscale()

$img->greyscale();

左が元画像、右がグレースケール化した画像です。

 ➜ 

色を反転させる: invert()

$img->invert();

左が元画像、右が色を反転させた画像です。

 ➜ 

色数を変更する: limitColors()

例えば、利用する色数を減らしてファイルサイズを減らしたい場合です。

$img->limitColors(3); // 色数は3色

左が元画像、右が色数を3色に変更した画像です。

 ➜ 

なお、第2引数には透過させたい色を指定することができます。

$img->limitColors(3, '#ffffff');

以下は元画像の白い部分が透過になっています。

アルファマスクをかける: mask()

例えば、以下のマスク画像(透過なし)を笑顔画像にかけたい場合です。

$img_path = storage_path('app/images/smile.png');
$img = \Image::make($img_path);
$mask_path  = storage_path('app/images/mask.png');
$img->mask($mask_path);

実際に保存した画像です。

また、第2引数をtrueにすると実際の透過部分をつかってアルファマスクをかけることもできます。

$img->mask($mask_path, true);

以下は透過部分を含んだマスク画像です。(白い部分が透過部分)

実行した結果はこうなります。
上からグラデーションで透過しているので、笑顔画像も以下のようになります。

透過させる: opacity()

$img->opacity(70); // 0〜100

なお、透過の度合いは以下のようになります。

  • 0 ・・・ 何も見えなくなる
  • 100 ・・・ 透過なし

実際に透過70で保存した画像です。

トリムする: trim()

例えば、周りの白い部分を削って画像を小さくしたい場合です。
元画像は以下になります。(256×256ピクセルのPNG画像)

$img->trim(); // 周りの部分を除去

トリムする基準を指定する

第1引数でトリムする基準となる場所を指定することができます。

$img->trim('bottom-right');

指定できるのは以下の3つです。

  • top-left ・・・ 左上(初期状態)
  • bottom-right ・・・ 右下
  • transparent ・・・ 透明部分

トリムする場所を指定する

第2引数では画像の「上」「右」「下」「左」どの部分をトリムするか指定することもできます。次の例は、上と下だけトリムするコードです。

$img->trim('bottom-right', ['top', 'bottom']);

トリムする許容範囲を指定する

どれだけ似た色を許容してトリムするかを指定します。

$img->trim('bottom-right', null, 40); 0〜100

トリムする際のfeatherを指定する

$img->trim('bottom-right', null, 30, 30);

画像を描画する

線や円を描画する方法です。
ちなみに、今回の環境ではGDよりImageMagickの方が綺麗な画像を作成することができました。もしImageMagickを使いたい場合は、ImageMagickを使うを参照してください。

空の画像をつくる

例えば、何もか描かれていない横120ピクセル x 縦60ピクセルの画像をつくるには以下のようにします。

$img = \Image::canvas(120, 60);

また、第3引数には色を指定することができて、例えば赤で塗りつぶした画像にしたい場合は以下のようにします。

$img = \Image::canvas(120, 60, '#ff0000'); // 赤い画像

実際にこの画像を保存したものが以下になります。

円を描画する

円を描画するには、以下のように

  • 直径
  • 中心のX座標
  • 中心のY座標

circle()に指定します。

背景を塗りつぶす: background()

円を特定の色で塗りつぶすにはbackground()を使います。

$diameter = 50; // 直径
$x = 50; // 中心のX座標
$y = 50; // 中心のY座標

$img->circle($diameter, $x, $y, function($draw) {

    $draw->background('#ffffff'); // 白で塗りつぶす

});

実際に保存した画像です。
左がGD、右がImageMagickです。

 

線を描く: border()

また、塗りつぶさずに円を線で描くこともできます。
その場合はborder()を使いましょう。

$img->circle($diameter, $x, $y, function($draw) {

    $draw->border(3, '#ffffff'); // 線の太さ「3」

});

左がGD、右がImageMagickです。

 

楕円形を描画する

楕円を描画するには、以下のように

  • width ・・・ 横
  • height ・・・ 高さ
  • 中心のX座標
  • 中心のY座標

circle()に指定します。

背景を塗りつぶす: background()

$width = 50;
$height = 30;
$x = 50; // 中心のX座標
$y = 50; // 中心のY座標

$img->ellipse($width, $height, $x, $y, function($draw) {

    $draw->background('#ffffff');

});

実際に保存した画像です。
左がGD、右がImageMagickです。

 

線を描く: border()

また、塗りつぶさずに楕円を線で描くこともできます。
その場合はborder()を使いましょう。

$img->ellipse($width, $height, $x, $y, function($draw) {

    $draw->border(3, '#ffffff'); // 線の太さ「3」

});

左がGD、右がImageMagickです。

 

全体を塗りつぶす: fill()

例えば、空の画像を赤で塗りつぶしたい場合です。

$img = \Image::canvas(120, 60); // 空の画像
$img->fill('#ff0000'); // 赤く塗りつぶす

あるデザイン画像の特定の場所を指定して塗りつぶす

例えば、以下の画像の周りの白い部分を赤で塗りつぶしたい場合です。

この場合は、塗りつぶしたい色がある場所をX,Y座標で指定する必要があります。

$x = 10;
$y = 10;
$img->fill('#ff0000', $x, $y); // 連続する(10,10)と同じ色を赤にする

実行結果はこうなります。

線を描画する: line()

例えば、120 x 60ピクセルの黄色い画像に左上から右下に向かって赤い線を引きたい場合です。

$img = \Image::canvas(120, 60, '#ff0'); // 黄色い画像
$start = ['x' => 10, 'y' => 10];
$end = ['x' => 110, 'y' => 50];

$img->line($start['x'], $start['y'], $end['x'], $end['y'], function ($draw) {

    $draw->color('#f00'); // 線の色は赤

});

実際に保存した画像です。
左がGD、右がImageMagickです。

 

なお、ImageMagickを使っている場合は、線の太さを指定することもできます。

$img->line($start['x'], $start['y'], $end['x'], $end['y'], function ($draw) {

    $draw->color('#f00');
    $draw->width(5);

});

実際に保存した画像です。

長方形を描画する: rectangle()

例えば、以下のような条件の長方形を描画したい場合です。

  • 長さ ・・・ 110 ピクセル
  • 高さ ・・・ 50 ピクセル
  • 背景色 ・・・ 緑
  • 線 ・・・ 赤で 3 ピクセル
$img = \Image::canvas(120, 60, '#eee');

$width = 110;
$height = 50;
$x = 10;
$y = 10;

$img->rectangle($width, $height, $x, $y, function($draw) {

    $draw->background('#0f0'); // 背景色
    $draw->border(3, '#f00');  // 線

});

実際に保存した画像です。
左がGD、右がImageMagickです。

 

多角形(ポリゴン)を描画する: polygon()

$img = \Image::canvas(120, 60, '#eee');
$points = [
    10, 10, // 点1の X,Y座標
    110, 30, // 点2の X,Y座標
    60, 50, // 点3の X,Y座標
];
$img->polygon($points, function ($draw) {

    $draw->background('#0f0'); // 背景色
    $draw->border(3, '#f00');  // 線

});

実際に保存した画像です。
左がGD、右がImageMagickです。

 

文字を描画する: text()

画像内にテキストを描画します。
なお、フォントさえきちんと設定していれば日本語も描画できます。

$x = 40;
$y = 20;

$img->text('テスト', $x, $y, function($font){

    $font->file(storage_path('app/fonts/ipagp.ttf')); // フォントファイル
    $font->size(25);        // 文字サイズ
    $font->color('#f00');   // 文字の色
    $font->align('center'); // 横の揃え方(left, center, right)
    $font->valign('top');   // 縦の揃え方(top, middle, bottom)
    $font->angle(30);       // 回転(フォントが指定されていないと無視されます。)

});

実際に保存した画像です。

点を描画する: pixel()

例えば、黒い画像のXY座標(30, 30)に白い点を描画したい場合です。

$img = \Image::canvas(120, 60, '#000'); // 黒い画像
$img->pixel('#fff', 30, 30);

実際に保存した画像です。
見えにくいですが、一点だけ白くなっています。

各種データを取得する

横の長さを取得する: width()

$img->width();

縦の長さを取得する: height()

$img->height();

ファイルサイズを取得する: filesize()

画像のファイルサイズ(データ容量)を取得するにはfilesize()を使います。

$img->filesize();

※ ただし、返ってくる数値はバイト数です。もし目で見て分かりやすい表記にしたいなら以下のような関数を利用するといいでしょう。

function readableFileSize($bytes)
{
    $units = ['TB', 'GB', 'MB', 'KB', 'B'];

    foreach($units as $index =>  $unit) {

        $exponent = 4-$index;
        $value = pow(1024, $exponent);

        if($bytes >= $value) {

            $result = $bytes / $value;
            return strval(round($result, 2)) .' '. $unit;

        }

    }

    return null;
}

MIMEタイプを取得する: mime()

$img->mime();

※ 内部的にはfinfo_file()が使われた結果を元にしています。

指定位置の色を取得する: pickColor()

例えば、X,Y座標(10,10)の色を取得したい場合です。

$x = 10;
$y = 10;
$color = $img->pickColor($x, $y);

なお、第3引数では取得する色の形式を指定することもできます。
指定できる形式は以下の5つです。

  • array ・・・ [255, 255, 255, 1.00]など。配列
  • rgba ・・・ 「rgba(255, 255, 255, 1.00)」など。文字列。
  • hex ・・・ 「#ffffff」など
  • int ・・・ 数値
  • obj ・・・ Intervention\Image\Gd\Color、もしくはIntervention\Image\Imagick\Colorのインスタンス

※ 2018.10.19現在、公式ドキュメントにはrgbが使えると書いてありますが、エラーになるので、省略しています。またobjはドキュメントには書かれていませんが利用できているので紹介しています。

EXIFデータを取得する: exif()

画像に埋め込まれたEXIFデータ(撮影日時やGPSなどの情報)を取得するには、exif()を使います。

※ ただし、PHP関数のexif_read_data()が使えるようになっている必要があります。また、現在のところこの関数がサポートしているのはjpegtiff形式のみです。

実際の使い方は以下のようにすると全てのEXIFデータを配列で受け取ることができ、

$img->exif();

また、引数にタグ名を指定するとそのデータのみ取得できます。

$img->exif('FileName');

IPTCデータを取得する: iptc()

画像に埋め込まれたIPTCデータを取得した場合です。

$img->iptc(); // 全てのIPTCデータを配列で取得

なお、引数にキーを指定することで特定のデータのみを取得することもできます。

$img->iptc('DocumentTitle'); // 著作権のみ取得

ちなみに取得できるキー(と内部的なキー)は以下になります。

  • DocumentTitle ・・・・ 2#005
  • Urgency ・・・ 2#010
  • Category ・・・ 2#015
  • Subcategories ・・・ 2#020
  • Keywords ・・・ 2#025
  • SpecialInstructions ・・・ 2#040
  • CreationDate ・・・ 2#055
  • CreationTime ・・・ 2#060
  • AuthorByline ・・・ 2#080
  • AuthorTitle ・・・ 2#085
  • City ・・・ 2#090
  • SubLocation ・・・ 2#092
  • State ・・・ 2#095
  • Country ・・・ 2#101
  • OTR ・・・ 2#103
  • Headline ・・・ 2#105
  • Source ・・・ 2#110
  • PhotoSource ・・・ 2#115
  • Copyright ・・・ 2#116
  • Caption ・・・ 2#120
  • CaptionWriter ・・・ 2#122

PSR-7ストリームを取得する: stream()

$img->stream();

なお、第1引数に画像タイプを指定することができます。
利用できる画像タイプはresponse()をご覧ください。

$img->stream('jpg');

その他

レスポンス・データを取得する: response()

$img->response();

なお、第1引数で画像タイプを指定することができます。

$img->response('jpg');

指定できる画像タイプは次のとおりです。

  • jpg
  • png
  • gif
  • tif
  • bmp
  • data-url

※ ただし、GDの場合はtifbmpはサポートしていません。

Laravelの場合

Laravelを利用している場合は、自動的にIlluminate\Http\Responseのインスタンスになるので、コントローラーやルーティングの中でreturnするだけで画像を表示させることができます。

return $img->response();

それ以外の場合

画像の生データが返ってきます。

ImageMagickを使う

Intervention Imageは初期状態ではGDライブラリを利用する設定になっていますが、ImageMagickもサポートしています。

もしImageMagickを使いたい場合は、以下の手順を行ってください。

まず、コマンドを実行するとコンフィグファイルをパブリッシュ(カスタマイズできるようにメインブロックへファイルをコピー)することができます。

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

そして、コピーされたconfig/image.phpを開いてdriverimagickへ変更しましょう。

// 'driver' => 'gd'
'driver' => 'imagick'

※ ただし、もちろん実行環境にImageMagickがインストールされている必要があります。例えば、Ubuntuなどではsudo apt install imagemagickとするとインストールすることができ、コマンド名はconvertになります。

なお、シンプルに以下のようにコードでも変更することができます。

\Image::configure(['driver' => 'imagick']);

キャッシュをつかう: cache()

画像のキャッシュを利用するには、intervention/imagecacheという専用のパッケージが必要になります。

そのため、実行する前に以下のコマンドでパッケージをインストールしておきましょう。

composer require intervention/imagecache

インストールが完了したら以下のように実行してください。

$minutes = 10;
$intervention_obj = true;

$img = \Image::cache(function($i) {

    $path = storage_path('app/images/smile.png');
    $i->make($path);

}, $minutes, $intervention_obj);
  • $minutes ・・・ キャッシュを保存しておく時間(分)
  • $intervention_obj ・・・ trueの場合はIntervention Imageのオブジェクトとして取得し、falseの場合は画像データが取得されます。

※ ちなみにLaraveではstorage/framework/cache/dataフォルダ内にキャッシュデータが保存されます。

状態を一時的に覚えておく、元に戻す: backup(), reset()

例えば、次のような例です。

  1. 黒い画像をつくる
  2. 赤で塗りつぶす
  3. 状態を覚えておく(backup)
  4. 青で塗りつぶす
  5. やっぱり元に戻す(赤に戻る)

では実際にコードで見てみましょう。

$img = \Image::canvas(120, 60, '#000000'); // 黒い画像をつくる
$img->fill('#ff0000'); // 赤で塗りつぶそう!

$img->backup();        // 今の状態を覚えておく

$img->fill('#0000ff'); // 青で塗りつぶそう!
$img->reset();         // やっぱ、やーめた!(赤に戻る)

※ なお、reset()backup()と対になるメソッドなので必ず先にbackup()を実行しておく必要があります。

画像が利用しているメモリを開放する: destroy()

Intervention Imageが利用するメモリは、PHPが終了するときに自動的に開放されるようなっています。

しかし、もし大きな画像を扱っている場合はできるだけ早くメモリを開放したいでしょう。そんな時はdestroy()を明示的に実行してメモリを開放させることができます。

$img->destroy();

画像の形式を変換する: encode()

例えば、PNG形式の画像をJPG形式に変換する場合です。

$path = storage_path('app/images/smile.png');
$img = \Image::make($path);

$jpg = $img->encode('jpg');

変換できる形式は以下になります。

  • jpg
  • png
  • gif
  • tif
  • bmp
  • ico
  • psd
  • webp
  • data-url

ちなみにjpgの場合のみ第2引数で画質を指定することができます。

$jpg = $img->encode('jpg', 100); // 0〜100(デフォルト: 90)

独自のフィルターを実装する: Filter()

例えば、画像の横幅が指定の長さよりも大きい場合はリサイズするというフィルターを実装する場合です。

まず、Intervention\Image\Filters\FilterInterfaceimplementしたクラスを以下のように作成します。(今回はappフォルダー直下に作成しました)

<?php

namespace App;

use Intervention\Image\Image;
use Intervention\Image\Filters\FilterInterface;

class ImageResizeFilter implements FilterInterface {

    private $max_width;

    public function __construct($max_width = true) {

        $this->max_width = $max_width;

    }

    public function applyFilter(Image $img) {

        if($img->width() > $this->max_width) {

            $img->resize($this->max_width, null);

        }

        return $img;

    }

}

このクラスで必ず用意しないといけないのが、applyFilter()です引数の$imgIntervention Imageのインスタンスになります。

では、実際にフィルターを使う部分です。

$img->filter(new ImageResizeFilter(50)); // 横幅が50pxより大きければリサイズ

このように機能別で独自のフィルターを作っておけば、また別の開発でも再利用がしやすいので、ぜひ活用したいところです。

画像ドライバーのデータを取得する: getCore()

例えば、GDのリソースやImageMagickのインスタンスを取得したい場合です。

$gd_resource = $img->getCore(); // GDの場合
$imagick = $image->getCore();   // ImageMagickの場合

インターレースの利用を設定する: interlace()

画像をインターレース対応にするかどうかを設定するにはinterlace()を使います。

$img->interlace(true); // インターレースにする

自動的に回転させる: orientate()

このメソッドは、まずEXIFデータのOrientationデータを読み込み、必要であれば画像を回転させるというものです。

※ そのため、EXIFが読み込めない、またデータがない場合は使えません。

$img->orientate();

Intervention Imageでサポートしている画像形式

GDを使うか、ImageMagickを使うかで扱うことができる画像形式が違ってきます。

GD

  • jpeg
  • png
  • gif
  • webp ・・・ Googleが開発した軽量画像形式。「ウェッピー」と読みます。

ImageMagick

  • jpeg
  • png
  • gif
  • tif
  • bmp ・・・ 懐かしのビットマップ形式。ファイルサイズが大きい。
  • ico ・・・ アイコン形式
  • psd ・・・ 主にPhotoshopなどで使われる形式
  • webp

開発のご依頼お待ちしております 😊✨
開発のご依頼はこちらから: お問い合わせ
どうぞよろしくお願いいたします!
このエントリーをはてなブックマークに追加       follow us in feedly  

開発効率を上げるための機材・まとめ