HTML,PHP,JavaScript

PHPでサムネイル画像を作る

1件のコメント
概要

先回までの投稿でDIV要素や既にサイズの小さいアイコン画像のマウスドラッグについて確認しました。今回は写真のサムネイル画像を作成し配置する方法について確認してみます。

サムネイル画像作成

先ずはサムネイル画像作成の基本プログラムです。
下の図は、基本プログラムが出力したサムネイル画像です。元画像パスとサムネイル画像幅をPHPプログラムに渡してPHPプログラムが生成した内容を出力します。指定する幅は、長い辺を幅として変換する様になっています。
（→サムネイル画像作成基本プログラムリンク）

プログラムは、htmlとサムネイル画像を生成するPHPで構成します。サムネイル画像の作成は、php の  imagecopyresampled()  関数を使います。 imagecopyresized() 関数というのも同じような目的で使える様ですが、画質の違いがある様な記事を見つけ、追及することなく、imagecopyresampled()  関数を使っています。

①メインプログラム（html）
メインプログラム側から、img 要素の src属性にPHPプログラムと引数を指定できることを始めて知り、勉強になりました。html プログラムはソースコードがエンドユーザー側で見えてしまうので、写真等のパスも開示されてしまいますが、このやり方を応用しパスを非公開に出来るかもしれないと思いました。機会があれば試してみたいと思います。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サムネイル画像</title>
</head>
<body>

<p>サムネイル画像① 幅指定：50</p>
<img src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=50">
<img src="create_thumbnail?img_pth=sample02.jpg&img_wdt=50">
<img src="create_thumbnail?img_pth=sample01.jpg&img_wdt=50">

<p>サムネイル画像② 幅指定：100</p>
<img src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=100">
<img src="create_thumbnail?img_pth=sample02.jpg&img_wdt=100">
<img src="create_thumbnail?img_pth=sample01.jpg&img_wdt=100">

<p>サムネイル画像③ 幅指定：200</p>
<img src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=200">
<img src="create_thumbnail?img_pth=sample02.jpg&img_wdt=200">
<img src="create_thumbnail?img_pth=sample01.jpg&img_wdt=200">

</body>
</html>

②画像生成プログラム（PHP）
php の  imagecopyresampled()  関数を使う為には、GDというPHPで利用できるグラフィックライブラリが必要の様です。私の環境ではそのまま利用することが出来ました。

<?php
if (!empty($_GET['img_pth'])) { $img_file = $_GET['img_pth']; } else { return ; }
if (!empty($_GET['img_wdt'])) { $img_wdt = $_GET['img_wdt']; } else { $img_wdt=100 ; }
 
// 元画像ファイルサイズ取得
list($org_wdt, $org_hgt) = getimagesize($img_file);
 
// 元画像縦横比率から変換高さ設定
$co_effe = $org_wdt / $org_hgt; $img_hgt = $img_wdt / $co_effe;
 
// 高さ＞幅　→　高さと幅入れ替え
if($co_effe<1){ $img_hgt = $img_wdt; $img_wdt = $img_wdt * $co_effe; }

// ファイル種類
$fl_typ = strtolower(end(explode('.', $img_file)));

// ファイル対応画像作成
if ($fl_typ === "jpg" || $fl_typ === "jpeg") {
    $org_img = ImageCreateFromJPEG($img_file);
    $crt_img = ImageCreateTrueColor($img_wdt, $img_hgt);

} elseif ($fl_typ === "gif") {
    $org_img = ImageCreateFromGIF($img_file);
    $crt_img = ImageCreateTrueColor($img_wdt, $img_hgt);

    $trnpa = imagecolortransparent($org_img);
    imagefill($crt_img, 0, 0, $trnpa);
    imagecolortransparent($crt_img, $trnpa);
 
} elseif ($fl_typ === "png") {
    $org_img = ImageCreateFromPNG($img_file);
    $crt_img = ImageCreateTrueColor($img_wdt, $img_hgt);

    imagealphablending($crt_img, false);
    imagesavealpha($crt_img, true);

} else { return; }

// 元画像再サンプリング
ImageCopyResampled($crt_img,$org_img,0,0,0,0,$img_wdt,$img_hgt,$org_wdt,$org_hgt);
 
// 画像生成
if ($fl_typ==="jpg" || $fl_typ==="jpeg"){ ImageJPEG($crt_img); }
elseif ($fl_typ==="gif") { ImageGIF($crt_img); }
elseif ($fl_typ==="png") { ImagePNG($crt_img); }
 
// メモリ開放
imagedestroy($crt_img);
imagedestroy($org_img);

?>

サムネイル画像配置

次にサムネイル画像の配置について検討します。サムネイルの元の写真の縦横サイズは撮影するカメラ・スマホ、また設定等によって変わります。先回確認したマウスドラッグを使うことを想定すると縦横一定間隔でサムネイル画像が配置されることが必要があります。必ずしも同じ間隔でなくても技術的には可能なのでしょうが、とりあえず必要性・スキルを考慮し、将来の目標に留めておきます。
前の『サムネイル画像作成』の図の通り、単純に配置すると少なくとも横方向配列は同間隔でないことが判ります。これに対し、横方向を一定間隔で配置すると次の図の画像配置②③④の様になります。
（→サムネイル画像配置基本プログラムリンク）

◆メインプログラム（html）
メインプログラムは次の通りです。配置③は、span 要素の背景として画像を呼び出し、CSS設定で背景画像の見え方をコントロールしている感じでしょうか。 配置④は、img 要素のCSS   object-fitを直接設定しているので、シンプルなのですが、残念ながら個人的に依存度が高いIE，Edge 未対応の様です。（※１）
また配置③，④ともそれぞれ、”background-size” , “object-fit”  の設定を代えることで表示内容も変わります。
※１：JS「object-fit-images」を使って適用可能の様です。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>サムネイル画像</title>
    <style>
	.div_dragbl {
		display: inline-block;
    		background-color: #ffff00 ;
    		background-position: center center ;
    		background-repeat: no-repeat ;
    		width: 200px ;
    		height: 200px ;
    		border: 1px solid #000000 ;
    		background-size: contain ;
	}

	.obj_fit_tes {
		width: 200px;
		height: 200px;
		object-fit: cover;
	}

    </style>
</head>


<body>

	<p>サムネイル画像配置①　※標準出力</p>
	<img src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=200">
	<img src="create_thumbnail?img_pth=sample02.jpg&img_wdt=200">
	<img src="create_thumbnail?img_pth=sample01.jpg&img_wdt=200">
	<BR>

	<p>サムネイル画像配置②　※DIV+標準出力</p>
	<div class="div_dragbl"><img src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=200"></div>
	<div class="div_dragbl"><img src="create_thumbnail?img_pth=sample02.jpg&img_wdt=200"></div>
	<div class="div_dragbl"><img src="create_thumbnail?img_pth=sample01.jpg&img_wdt=200"></div>
	<BR>

	<p>サムネイル画像配置③　※SPAN+background-size:contain</p>
	<span class="div_dragbl" style="background-image: url('create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=200')"></span>
	<span class="div_dragbl" style="background-image: url('create_thumbnail?img_pth=sample02.jpg&img_wdt=200')"></span>
	<span class="div_dragbl" style="background-image: url('create_thumbnail?img_pth=sample01.jpg&img_wdt=200')"></span>
	<BR>

	<p>サムネイル画像配置④　※object-fit:cover (IE,Edge未対応)</p>
	<img class="obj_fit_tes" src="create_thumbnail?img_pth=../image_sample/P_20180811_153129_vHDR_Auto.jpg&img_wdt=200">
	<img class="obj_fit_tes" src="create_thumbnail?img_pth=sample02.jpg&img_wdt=200">
	<img class="obj_fit_tes" src="create_thumbnail?img_pth=sample01.jpg&img_wdt=200">

</body>
</html>

 

マウスドラッグへの対応

最後にマウスドラッグに対応させてみます。枠内に全体を収める内接（obtain）と短辺を枠にフィットさせる外接（cover）のテストプログラムリンクです。

→①サムネイル作成・配置マウスドラッグ対応（内接）
内接では写真全体が枠内に収まりますが、下図の通りすき間が出来てしまいます。

→②サムネイル作成・配置マウスドラッグ対応（外接）
外接では縦横比は維持されていますが、枠内に収まらない写真の一部は除去されています。

まとめ

この投稿を作成しながら、サムネイル画像のサイズを確認して直接一定間隔に配置することも可能の様に思えてきました。とは言うものの面倒なので、特に問題が出ない限りこの方法を少し使ってみようと思っています。

「PHPでサムネイル画像を作る」への1件のフィードバック

  1. 初めまして、同じ様な動作を実装したいと思っているのですが、中々解決に至らなかった為質問させて頂きます。

    ＞＞img 要素の src属性にPHPプログラムと引数を指定
    上記の部分がうまくいっていないような気がします。
    phpを指定して引数を渡せているのかもわからないです。

    ただ、画像のパスが間違っているとエラーが出るので、たぶん出来ているのではないかと考えています。

    エラーが出ない時には値が返ってきません、何度挑戦しても値が返ってこないです。
    ifで囲むとfalseが返ってきます。

    ちなみに、この記事のコードをコピペしてやってみてもダメでした。
    GDはphpinfoで確認した所使用可能な状態でした。

    なお実装環境はwordpressになります。

    漠然としていて申し訳ないのですが、そもそもimgのsrcからphpは指定できるのか？というところで詰まっています。

    何卒ご教授頂けますでしょうか。
    よろしくお願いいたします。

    返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です