投稿者: sk

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と同じ直径のサイズの円を作成して、画像を切り出しております。