HTMLでのテキストの余白が邪魔だったり、親要素の横幅の何パーセントで文字を配置したい時など、時々画像として文字を表示したいケースがあります。
Laravel9でテキストをパラメータで受け取り、png形式の余白無しの画像を返すメゾッドを作っていきます。
手順
作るもの
指定のURLにパラメータを指定してアクセスしたら画像を返す
例
https://mashmy.net/image?text=TEST
手順① ライブラリをインストール
composer require intervention/image
手順② フォントファイルをpublicディレクトリに配置
私はpublic/fontsに配置しました
手順③ ルーティング、コントローラーにメゾッドを作成
routes/web.php
Route::get('/', [App\Http\Controllers\ImageController::class, 'text'])->name('front.image.text');
app/Http/Controllers/ImageController
app/Http/Controllers/ImageController
use Intervention\Image\Facades\Image;
// ...
public function image(Request $request)
{
$canvas = Image::canvas(100, 100, '#0072c6');
return $canvas->encode('png')->response();
}
こればかりはプレビュー見ながら作業しないとどうにもならないのでとりあえず見えるようにします。
何も問題なければ青い四角形が表示されると思います。
手順④ テキスト生成の処理を書く
public function detail(Request $request)
{
$canvas = Image::canvas(600, 300, [0, 0, 0, 0]);
$canvas->text($request->text, 300, 150, function ($font) {
$font->file(public_path('fonts/KiwiMaru-Light.ttf'));
$font->size(50);
$font->align('center');
});
// キャンバスの余白をトリミングする
$canvas = $canvas->trim('top-left', ['top', 'bottom', 'left', 'right'], 0, 0);
return $canvas->encode('png')->response();
}
下の箇所で生成する画像のサイズを指定するのですが(後でトリミングするけど)
$canvas = Image::canvas(横幅, 縦幅, [0, 0, 0, 0]);
$canvas->text($request->text, 横幅, 縦幅, function ($font) {
$font->file(public_path('fonts/KiwiMaru-Light.ttf'));
$font->size(50);
$font->align('center');
});
ここのサイズが充分でないと生成した画像の余白が残ってたりテキストがカットされたりします。