はじめに
この前、画像に任意の文字を挿入するタスクの時に調査した、PHPの画像編集ライブラリIntervention Imageを紹介したいと思います。
やる事
Laravelを使用して、画面上でユーザーが入力した任意の文字列を画像に挿入したいと思います。
今回は富士山の画像を使用したいと思います。
富士山まだ登った事ないですが、死ぬまでに一度は登ってみたいです。
インストール
Composerコマンド一発でインストール出来ます。
composer require intervention/image
画像読み込み
画像のパスを指定してあげます
| 1 2 3 | // 画像読み込み $path = '画像ファイルのパス'; $img = Image::make($path); |
文字列の追加
text
メソッドで、挿入する文字列の指定と位置の調整。分かりやすい様に色も付けておきます。
日本語入力がデフォルトでは準備されていないので、適宜フォントファイルを準備してください
| 1 2 3 4 5 6 7 8 9 10 | // 画像に文字列を加える $x = 10; // x座標 $y = 40; // y座標 $word = '挿入する文字列'; $img->text($word, $x, $y, function($font){ $font->file(storage_path('app/fonts/ipaexm.ttf')); // 日本語フォントファイル $font->size(40); // 文字サイズ $font->color('#dc143c'); // 文字色 }); |
編集した画像の保存
save
メソッドで画像の保存が出来ます。
| 1 2 3 | // 画像保存 $save_path = '画像ファイルを保存したいパス'; $img->save($save_path); |
実際のコード
実際に画面上で文字列を入力して画像に挿入してみたいと思います。
View側
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <!DOCTYPE html> <html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ImageEdit</title> </head> <body> <form action="/add_words" method="POST"> @csrf <div> <div> <input type="text" name="word" placeholder="画像に挿入したい文字を入力してください。" style="width: 300px; margin-bottom: 10px"><br> </div> <input type="submit" value="画像変換" style="margin-bottom: 10px"> <div style="display: flex"> <div style="display: grid; margin-right: 10px"> <span>編集前</span> <img src="storage/images/fuji.jpg" alt="no image"> </div> <div style="display: grid"> <span>編集後</span> <img src="storage/images/fuji_edit.jpg" alt="no image"> </div> </div> </div> </form> </body> </html> |
バックエンド側
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | public function index() { return view('image_edit.index'); } public function addWords(Request $request) { // 画像に入力したい文字列 $word = $request->get('word'); // 読み込み // 編集済み画像あれば、それを無ければデフォルト画像を読み込む if (Storage::exists('app/public/images/fuji_edit.jpg')) { $path = storage_path('app/public/images/fuji_edit.jpg'); } else { $path = storage_path('app/public/images/fuji.jpg'); } // 画像読み込み $img = Image::make($path); // 画像に文字列を加える $x = 10; // x座標 $y = 40; // y座標 $img->text($word, $x, $y, function($font){ $font->file(storage_path('app/fonts/ipaexm.ttf')); // 日本語フォントファイル $font->size(40); // 文字サイズ $font->color('#dc143c'); // 文字色 }); // 画像保存 $save_path = storage_path("app/public/images/fuji_edit.jpg"); $img->save($save_path); return redirect('/image_edit'); } |
画面
入力した任意の文字列を画像に挿入する事が出来ました。
他に使う機会がありそうな編集
モザイク
引数の数字が大きいとよりモザイクがかかるみたいです
| 1 2 | // モザイクをかける。 $img->pixelate(10); |
ぼやけ
引数の数字が大きいとよりぼやけるみたいです
| 1 2 | // ぼやけさせる $img->blur(15); |
リサイズ
| 1 2 3 4 | // 高さ200でアスペクト比を変えずにリサイズ $img->resize(null, 200, function ($constraint) { $constraint->aspectRatio(); }); |
さいご
非常に簡単に画像編集が出来るので、興味があれば一度試してみてください
おすすめ書籍
