この前、画像に任意の文字を挿入するタスクの時に調査した、PHPの画像編集ライブラリIntervention Imageを紹介したいと思います。
Laravelを使用して、画面上でユーザーが入力した任意の文字列を画像に挿入したいと思います。
今回は富士山の画像を使用したいと思います。
富士山まだ登った事ないですが、死ぬまでに一度は登ってみたいです。
Composerコマンド一発でインストール出来ます。
composer require intervention/image
画像のパスを指定してあげます
// 画像読み込み
$path = '画像ファイルのパス';
$img = Image::make($path); textメソッドで、挿入する文字列の指定と位置の調整。分かりやすい様に色も付けておきます。
日本語入力がデフォルトでは準備されていないので、適宜フォントファイルを準備してください
// 画像に文字列を加える
$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メソッドで画像の保存が出来ます。
// 画像保存
$save_path = '画像ファイルを保存したいパス';
$img->save($save_path); 実際に画面上で文字列を入力して画像に挿入してみたいと思います。
View側
<!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> バックエンド側
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');
} 画面
入力した任意の文字列を画像に挿入する事が出来ました。
引数の数字が大きいとよりモザイクがかかるみたいです
// モザイクをかける。
$img->pixelate(10); 引数の数字が大きいとよりぼやけるみたいです
// ぼやけさせる
$img->blur(15); // 高さ200でアスペクト比を変えずにリサイズ
$img->resize(null, 200, function ($constraint) {
$constraint->aspectRatio();
}); 非常に簡単に画像編集が出来るので、興味があれば一度試してみてください