Laravel

【Laravel / Intervention Image】 画像をリサイズして圧縮する (横向き問題も解消)

えびさん

大きい画像などをサムネイルでたくさん表示するとページ遅延の原因になる
そこで、アップロードする時に圧縮処理も追加したときのメモ

Intervention Imageを入れる

サイトはこちら

  • composerで入れる
composer require intervention/image

Laravel5.5以降の場合は Package Auto Discoveryが導入されているので、
上記コマンドだけで\Image::make('***')のように使用可能になる

※ Laravel5.4以下の場合は、下記作業も必要↓↓

  • app/config.phpの変更
'providers' => [
    // ... (省略)
    Intervention\Image\ImageServiceProvider::class,  // ⭐️ 追記
],

'aliases' => [ 
   // ... (省略)
   'Image' => Intervention\Image\Facades\Image::class, // ⭐️ 追記
],
Package Auto Discoveryとは

Laravel5.5から導入された、Composerのパッケージを自動で検出する仕組み。
composer requireやcomposer install/update をした時に自動で読み込んでくれるので、config/app.phpへのプロバイダやFacadeの追記作業が不要になる ( 便利！)
composer removeした際は読み込みを解除してくれるので至れり尽くせり

(参考) https://laravel-news.com/package-auto-discovery

使ってみる

\Image::make('***')で対象のファイルを読み込んでresizeでサイズ変更する

// 画像を読み込む
$image = \Image::make($filePath);
// EXIFのOrientationによって回転させる
$image->orientate();
// リサイズする
$image->resize(600, null,
  function ($constraint) {
    // 縦横比を保持したままにする
    $constraint->aspectRatio();
    // 小さい画像は大きくしない
    $constraint->upsize();
  }
);
// 保存する
$image->save(storage_path('***/*****.png'));

補足
  • \Image::make()の引数には、ファイルURLやパス、UploadedFileなど様々な形式で指定可能。例えばフォームでアップロードされたファイルは、
    \Image::make($request->file('file'));
    のように読み込める
  • $image->orientate();をしとかないと、スマホでアップされた画像が勝手に横向きになったりするので要注意
  • $image->resize()では、第1引数に$width, 第2引数に$heightを指定する。(指定なしの場合はnull)
    下記の例だと、横幅は600pxで縦幅は指定なしの設定
    第3引数では、$callbackでリサイズする対象のClosureオブジェクトを使用できるので、ここでリサイズのオプション設定ができる
    (参考) http://image.intervention.io/api/resize
$image->resize(600, null,
  function ($constraint) {
    // 縦横比を保持したままにする
    $constraint->aspectRatio();
    // 小さい画像は大きくしない
    $constraint->upsize();
  }
);