はじめに
サムネイルを作成する機会がありPHPで作れるのかと思ってましたが、調べたらライブラリを使えば作れるということだったので作ってみました。
サムネイルとは
画像や印刷物ページなどを表示する際に視認性を高めるために縮小させた見本のこと
from wikipedia
画像を一覧で表示させたいときなど、オリジナルサイズの画像を配置するとサイズが大きかったりバラバラだったりするので、読み込むのに時間がかかってしまいます。
それを解消するために、サイズや画質を落としてサムネイル画像を作成して管理します。
PHPではGDというライブラリを使って作成することが可能です。
やること
- 画像をアップロード
- 画像形式別にサムネイル作成
- アップロードされた画像をサイズに分けて出力
- 作成したサムネイルをS3へアップロード
※S3へのアップロード処理の中身は割愛します
画像形式別にサムネイル作成
function makeThumb ($originalFile, $thumbSize)
{
// 画像の横幅・高さ取得
list($originalWidth, $originalHeight) = getimagesize($originalFile);
// サムネイルの横幅指定
$thumbWidth = $thumbSize;
// サムネイルの高さ算出
$thumbHeight = round($originalHeight * $thumbWidth / $originalWidth );
$fileType = substr($originalFile, strrpos($originalFile, '.') + 1);
// ファイルタイプ別に作成
if ($fileType === "jpg" || $fileType === "jpeg") {
$originalImage = imagecreatefromjpeg($orginalFile);
$thumbImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
} elseif ($fileType === "png") {
$originalImage = imagecreatefrompng($originalFile);
$thumbImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
// ※アルファチャンネル保存
imagealphablending($thumbImage, false);
imagesavealpha($thumbImage, true);
} elseif ($fileType === "gif") {
$originalImage = imagecreatefromgif($originalFile);
$thumbImage = imagecreatetruecolor($thumbWidth, $thumbHeight);
// 透明色を定義する
$transparent = imagecolortransparent($originalImage);
imagefill($thumbImage, 0, 0, $transparent);
imagecolortransparent($thumbImage, $transparent);
} else {
return '画像形式が正しくありません'; }
}
//
imagecopyresampled($thumbImage, $originalImage, 0, 0, 0, 0,
$thumbWidth, $thumbHeight, $originalWidth, $originalHeight);
// テンポラリファイルに画像出力
$tmpFile = $_FILES['image']['tmp_name'];
if ($fileType === "jpg" || $fileType === "jpeg"){
imagejpeg($thumbImage, $tmpFile);
} elseif ($fileType === "png") {
imagepng($thumbImage, $tmpFile);
} elseif ($fileType === "gif") {
imagegif($thumbImage, $tmpFile);
}
// 画像破棄
imagedestroy($originalImage);
imagedestroy($thumbImage);
}
αチャンネル（アルファチャンネル、英: alpha channel）とは画像処理分野において、各ピクセルに対し色表現のデータとは別にもたせた補助データのこと。一般に画素の不透明度 (opacity) を表現する。
from wikipedia
サイズ毎の画像をS3へアップロード
オリジナル、S、M、Lにサイズを分けてサムネイル画像を出力し、S3にアップロードする
function uploadFile() {
$tmpFile = $_FILES['image']['tmp_name'];
// サーバーへ一時保存
move_uploaded_file($tmpFile, 'images/test.png');
$image = 'images/test.png';
// サムネイルのサイズ指定
list($originalSize) = getimagesize($image);
$thumbSizes = [$original_size, 200, 400, 800];
$fileSizeNames = ['or_', 's_', 'm_', 'l_'];
$thumbSizeAndName = array_map(NULL, $thumbSizes, $fileSizeNames);
// サイズと名前を合わせてそれぞれS3にアップロード
foreach ($thumbSizeAndName as [$thumbSize, $filSizeName]) {
$this->makeThumb($image, $thumbSize);
$fileName = 'images/' . $fileSizeName . 'test.png';
$file = fopen($tmpFile, 'rb');
// S3にアップロード 処理割愛
uploadS3($file, $fileName);
}
//サーバー上のファイル削除
unlink($image);
}
結果
左：L 右上：M 右下：S
詰まったポイント
- 画像サイズに合わせて対応するサイズ名をファイルにつける
array_mapを使って一つの変数にサイズと名前を対応させた配列を作る
第一引数がnullの場合は入力された配列を返す
foreachで回してサイズと名前を取得する
$thumbSizeAndName = array_map(NULL, $thumbSizes, $fileSizeNames);の結果↓
array(4) {
[0]=>
array(2) {
[0]=>
int(50)
[1]=>
string(3) "or_"
}
[1]=>
array(2) {
[0]=>
int(200)
[1]=>
string(2) "s_"
}
[2]=>
array(2) {
[0]=>
int(400)
[1]=>
string(2) "m_"
}
[3]=>
array(2) {
[0]=>
int(800)
[1]=>
string(2) "l_"
}
}