【Laravel】Intervention Imageで画像圧縮!表示方法や保存方法とは

この記事からわかること
- Intervention ImageをLaravelに導入する方法
- 読み込んだ画像を表示させる方法
- 保存する際のパス指定の注意点
index
[open]
\ アプリをリリースしました /
環境
- Laravel:8.83.29
- PHP:8.2.0
- Intervention Image:2.7
- macOS:Sonoma 14.6.1
※ 2025年1月現在Intervention Imageの最新バージョンは3.x系ですが2.x系から大きくコードが刷新されており、従来の(この記事で紹介している)実装方法では動作しません。PHP8.2.0もサポート外になっているようなので注意してください。
Intervention Imageのインストール方法
Laravel(というよりphp)の便利なライブラリの1つ「Intervention Image」。画像操作に長けており、圧縮や加工、透かしなどライブラリを読み込むだけで簡単に操作できるようになります。
おすすめ記事:公式:Intervention Image
導入するまでのステップ
- ライブラリをインストールする
- 「config」>「app.php」に設定を登録
- 「GD」の組み込み
- use文で読み込み使用
まずはcomposerを使ってIntervention Imageをインストールしていきます。未指定だと3.x
系をインストールしてしまうので明示的に2.7
を指定します。
インストールが完了したら「config」>「app.php」のprovide
rとalias
の部分に以下のように追記します。
次に「GD」と呼ばれる画像を生成、操作するためのphpライブラリを組み込みます。実は画像操作をしているのはこのライブラリでややこしいGDでの操作を簡単に扱えるようにしているのが「Intervention Image」になります。組み込みは以下のコマンドを実行します。
これにより「config」内に使用する画像操作ライブラリ(今回はGD)が記述された「image.php」が作成「されます。
「config」> 「image.php」
これで導入〜設定まで完了です。configのキャッシュを念のため削除しておき、使用していきます。
画像圧縮や表示などの使用方法
フォームデータから読み込む使用例
コントローラーなどで使う際はuse文
で「Intervention Image」を読み込んで使用します。aliasに指定したキー値を読み込めばOKです。
操作するには画像を読み込むImage::make($filePath);
の形から始まります。$filePath
の部分には外部の画像URLなど様々な形式に対応してくれます。
読み込めるデータ
- 外部の画像URL
- 相対パス
- フォームデータ
- 画像データ
- etc...
Intervention Imageに読み込んだ画像をそのまま表示させるにはresponseメソッド
を使って以下のようにすればOKです。
これでWebページ上に読み込んだ画像を表示させることができます。
続いて画像を圧縮/加工していきます。画像自体の大きさを変更することで容量を軽減させることができます。例えば横幅を500pixel、縦幅を300pixelに変更する場合はresizeメソッド
で実現できます。第一引数に横幅、第二引数に縦幅、第三引数にオプションを指定できます。
横幅は設定しつつ縦幅は画像のアスペクト比(横と縦の比率)を変更しない大きさにしたい場合は第二引数にnull値
を、オプションで以下のように指定すれば実現できます。指定値より小さい画像は拡大しないようにすることも可能です。
スマホからアップロードした際に画像の向きが変化しないようにするにはorientateメソッド
を使用します。このメソッドはEXIFデータ(写真の撮影日時や絞り具合、加工した情報などを保持している画像データ)の場合にのみ作動します。
Laravel内にアップロードされたファイルを保存する方法
Laravel内にユーザーからアップロードされたファイルを保存していく場合はpublicフォルダの中ではなくstorageフォルダの中に入れていきます。
「storage」>「app」>「public」の中に「uploads」フォルダを作成しておき、そこに保存されるように設定していきます。
Intervention Imageを導入していなければstoreAsメソッド
で保存できますが導入した場合はsaveメソッド
を使っていきます。使い方は引数に保存先のパスを指定するだけです。パスの中にファイル名まで含めれば指定の名前で保存させることもできます。
storage
への保存ができたらpublicフォルダ内とstorageフォルダを紐づけるシンボリックリンクを貼ります。これをしないと画像が表示されないので注意してください。シンボリックリンクはartisanコマンド
で作成できます。
こちらの記事にはIntervention Imageを使わない場合のアップロード方法をまとめていますので参考にしてください。
Intervention Image導入で出たエラー解決
このエラーはsaveメソッドの引数違いのために起きていたエラーでした。最初storeAsメソッドで記述していたコードをsaveメソッドに書き換えた際に引数を変更していなかったためエラーが出たようです。
このエラーは指定している画像パスが正しくない時に発生するエラーです。画像パス指定はややこしいので注意してください。
私がLaravel学習に使用した参考書
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。