intervention/image

Laravelの画像編集ライブラリで有名なIntervention Imageを使ったTIPSです。

四角い画像を読み込んで、丸く切り出す方法を解説します。
CSS的にいうと、radiusあたりの操作といった感じでしょうか。

先にコードを記述してしまうと、下記のような感じです。

$profileImage =  Image::make($user->image_path);

$width = 200;
$height = 200;
$profileImage->widen($width);
$profileImage->heighten($height);

$mask = Image::canvas(200, 200);
$mask->circle($width, $width/2, $height/2, function ($draw) {
    $draw->background('#fff');
});
$profileImage->mask($mask, false);

$profileImage->save($path."circled.png");

簡単に解説していきます。

$profileImage =  Image::make($user->image_path);

Image::make($user->image_path);
ここで、画像を読み込んでおります。
私の場合は、 $user->image_path ここはAWS S3上UPした画像URLです。
https://oshimen-storage.s3.ap-northeast-1.amazonaws.com/XXXXXXXXXXXXXXXXXXXX
というやつですね。

$width = 200;
$height = 200;
$profileImage->widen($width);
$profileImage->heighten($height);

画像サイズを矯正しております。

$mask = Image::canvas(200, 200);
$mask->circle($width, $width/2, $height/2, function ($draw) {
    $draw->background('#fff');
});
$profileImage->mask($mask, false);

maskを作成しております。
maskと同じ直径のサイズの円を作成して、画像を切り出しております。

Laravelを使って画像生成したい（文章を追加した画像生成）ときの流れを解説します。導入するまでに、数々のerrorを対処してきたので記録して残したいと思います。
ライブラリの導入は正しく把握していないと苦労が多いですね…!!

環境：
Laravel 7
dokcer
docker-compose

必要な要素：

１：intervention/imageのインストール
２：開発環境へGDのインストール
３： intervention/image で画像を生成
４： intervention/image で画像に文字を描画する

こちらの流れです。

１：intervention/imageのインストール

まずは、ライブラリのインストールです。
composerでインストールしていきます。

composer require intervention/image

intervention/imageをファザードで活用するために設定を追加していきます。

> config/app.php
の中に2か所追加していきます。

 'providers' => [     
// 省略 
Intervention\Image\ImageServiceProvider::class ]


'aliases' => [ 
// 省略
'Image' => Intervention\Image\Facades\Image::class ]

これにて基本の設定は完了です。
しかし、これだけで使用してみようとすると、errorがでます。

たとえば、
簡単に intervention/image を使うように下記を実行してみてください。

 use Intervention\Image\Facades\Image; 

//省略

public function imagerotate()
{
$path = storage_path('app/public/profile/profiledefault.png');
$img = Image::make($path);
$img->rotate(-45);
$save_path = storage_path('app/public/profile/profiledefault222.png');
$img->save($save_path); 
}

storage>app/public/profile/ フォルダを作成して、その中にprofiledefault.png　を格納

これだと、下記のようなエラーがでると思います。
（正しくGDがインストールされている場合は問題ないです。）

GD Library extension not available with this PHP installation.

intervention/image を使うには、GDというライブラリも必要だということですね。

２：開発環境へGDのインストール

それでは、GDを開発環境にインストールしていきます。
dockerを使っているので、そちらへインストールしていきます。

RUN apt-get install -y zlib1g-dev \ 
    libzip-dev \
    libjpeg-dev \
    libpng-dev \
    libfreetype6-dev \
    libjpeg62-turbo-dev
RUN docker-php-ext-configure \
    gd --with-freetype-dir=/usr/include --with-png-dir=/usr/include --with-jpeg-dir=/usr/include
RUN docker-php-ext-install pdo_mysql zip gd

関係している部分のみ記述しています。

RUN docker-php-ext-install　でgdをインストールしているのですが、
gdをインストールするために
・RUN apt-get install
・RUN docker-php-ext-configure
を使って必要なものを準備しています。

--with-freetype-dir=/usr/include

こちらが無くても、画像の処理は可能です。
ただし、これが無いと画像に文字を描画することができません。

正しく動いたdockerfileのみ記述しましたが、こちらを整えるまでに幾つかのerrorがありました….

configure: error: jpeglib.h not found.
ERROR: Service 'php' failed to build: The command '/bin/sh -c docker-php-ext-configure  gd --with-png-dir=/usr/include --with-jpeg-dir=/usr/include' returned a non-zero code: 1

errorの原因と対処法 ↓ ↓ ↓ ↓

configure: error: jpeglib.h not found. ERROR: Service ‘php’ failed to build:

 Call to undefined function Intervention\Image\Gd\imagettfbbox()

errorの原因と対処法 ↓ ↓ ↓ ↓

Call to undefined function InterventionImageGdimagettfbbox()

それぞれ個別にerrorの原因と対処法を記述しましたので、そちらも参考にしてみ下さい。

３： intervention/image で画像を生成

ここまでくれば、画像を生成することができると思います。

前述した、下記を実行して確認してみてください。

use Intervention\Image\Facades\Image; 

//省略

public function imagerotate()
{
$path = storage_path('app/public/profile/profiledefault.png');
$img = Image::make($path);
$img->rotate(-45);
$save_path = storage_path('app/public/profile/profiledefault222.png');
$img->save($save_path); 
} 
// storage>app/public/profile/ フォルダを作成して、その中にprofiledefault.png　を格納

４： intervention/image で画像に文字を描画する

いよいよ最後です。
画像に文字を描画していきます。

文字を描画する方法は、下記です。
canvasの作り方は他にもあります。例えば、既存の画像を使用することも可能です。

$x = 40;
$y = 20;
$img = Image::canvas(120, 60, '#fff');
$img->text('こんにちわ！', $x, $y, function($font){
    $font->file('assets\fonts\SawarabiGothic-Regular.ttf');
    $font->size(25);
    $font->color('#333333');
    $font->align('center');
    $font->valign('top');
    $font->angle(30);
});
$save_path = storage_path('app/public/profile/profiledefault222.png');
$img->save($save_path);

public\assets\fontsフォルダの配下に SawarabiGothic-Regular.ttf というwebフォントを格納しております。

このフォントのパス指定も色々あるようです。
パス指定を間違えると、下記errorがでましたの注意して下さい。

 Internal GD font () not available. Use only 1-5.

タグ: intervention/image

LaravelのIntervention Imageで、画像を丸く切り出す方法