雑多なレビューサイトこもれびゅー備忘録を兼ね PC周辺機器・家電製品・文房具等々の製品レビューを行っているサイトです

• ホーム
• プログラミング
• PHP

サムネイル画像を出力し表示する平成30年 11月 17日 作成

概略

写真等を多く配置するページにおいて、元画像の大きなサイズで配置させると表示に時間がかかるのでサムネイル画像にて対応する事が多いのだが、PHPで動的にサムネイルの作成する方法についての手段・方法を習得する。

動的にサムネイル画像を作成する事により、個別にサムネイル画像を作成等の手間を省き効率化も図りたい。

手段

HTMLのimgソースからphpファイルとして読み出す事で実現。

HTML記述例

<a href="#_"><img src="../../thumbnail?url=img/sample.jpg&wid=240" alt="" width="100%" height="100%" /></a>

サムネイル画像を出力するPHPを指定。

GETとし元画像のURLとサムネイル横幅を指定。

実装方法

PHP

<?php
	header('Content-Type: text/html; charset=utf-8');
	
	// urlと横幅取得及び簡易チェック
	$url = filter_input(INPUT_GET, "url");
		if(!preg_match("/^[一-龠a-zA-Z0-9-_\/.()]+$/", $url)){
			exit("urlエラー");
		}
	$wid = filter_input(INPUT_GET, "wid");
	if(!preg_match("/^[0-9]{2,4}$/", $wid)){
			exit("画像サイズエラー");
		}
	
	// 文字化けする場合
	// $url = mb_convert_encoding($url, "sjis", "utf-8");
	
	//「getimagesize()関数」：幅サイズ、縦サイズ、画像のタイプ、width="xxx",hegiht="yyy"の4つが返ってくる　ここでは幅と縦だけを使うのでlist($width, $height)を左辺に入れる
	list($original_width, $original_height) = getimagesize($url);
	
	$thumb_width = $wid;
	// $wid（作成するサムネイル画像サイズ）とオリジナル画像サイズを比較し振り分け
	if($thumb_width < $original_width){
		// 比率より高さを算出
		$thumb_height = round($original_height * $thumb_width / $original_width);
	}
	else{
		// オリジナル画像の方が大きいので、オリジナル画像サイズで出力
		$thumb_width = $original_width;
		$thumb_height = $original_height;
	}
	
	/*
	高さが幅より大きい場合の横幅を高さに代入し抑制する手法
	$proportion = $original_width / $original_height;
	$thumb_height = round($thumb_width / $proportion);
	if($proportion < 1){
	    $thumb_height = $thumb_width;
	    $thumb_width = round($thumb_width * $proportion);
	}
	*/
	
	// サイズを指定し、背景用画像を生成
	$canvas = ImageCreateTrueColor($thumb_width, $thumb_height);
	
	// ファイル形式を判定するし出力を振り分け
	$mime_type = exif_imagetype($url);
	switch($mime_type){
		case "1":
			// PHPで画像を出力するときのヘッダー出力　コンテンツがgifであることをブラウザに知らせる
			header("content-type: image/gif");
			// 画像リソースを確保
			$image = ImageCreateFromGIF($url);
			
			// ▼ 透明を有効にする処理 ▼
			// 元画像から透過色を取得する
			$alpha = imagecolortransparent($image);
			// その色でキャンバスを塗りつぶす(左上 0, 0)
			imagefill($canvas, 0, 0, $alpha);
			// 塗りつぶした色を透過色として指定する
			imagecolortransparent($canvas, $alpha);
			// ▲ 透明を有効にする処理 ▲
			
			// $canvasに対し指定したサイズにて画像をコピーする
			ImageCopyResized($canvas, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $original_width, $original_height);
			// gifファイル出力  PHPのバージョン5.4からは第2引数空白厳禁
			imageGIF($canvas, NULL);
		break;
		case "2":
			header("content-type: image/jpeg");
			$image = ImageCreateFromJPEG($url);
			ImageCopyResized($canvas, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $original_width, $original_height);
			imageJPEG($canvas, NULL, 65);
		break;
		case "3":
			header("content-type: image/png");
			$image = ImageCreateFromPNG($url);
			
			// ▼ 透明を有効にする処理 ▼
			// アルファブレンディングをOFFにする
			imagealphablending($canvas, false);
			// 完全なアルファチャネル情報を保存するフラグをONにする
			imagesavealpha($canvas, true);
			// ▲ 透明を有効にする処理 ▲
        	
			ImageCopyResized($canvas, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $original_width, $original_height);
			imagePNG($canvas, NULL, 6);
		break;
		case "6":
			header("content-type: image/bmp");
			$image = ImageCreateFromBMP($url);
			ImageCopyResized($canvas, $image, 0, 0, 0, 0, $thumb_width, $thumb_height, $original_width, $original_height);
			imageBMP($canvas, NULL);
		break;
	}
	
	// メモリを開放
	imagedestroy($canvas);
	imagedestroy($image);
?>

考察

目標としていた事は達成できた。

圧縮比率の設定ができ利便性は高いと感じる。

コメント