画像掲示板に画像一覧を表示

画像掲示板に画像一覧を表示

#17 画像一覧を表示する (1)
http://dotinstall.com/lessons/upload_image_php/4517
を元に
配列に格納されたファイル名を元に画像を表示していく

編集するのは index.php

表示する画像は images[] の中に
サムネイル
元の大きさ
の画像が条件に基づき入っているので、あとは表示するだけ

表示は foreach() で表示する

<?php foreach($images as $image) ; ?>

そして、サムネイル画像だったときには
リンクをつけて、元画像が表示できるようにする

そして、サムネイル画像がないのなら、元画像を
そのまま表示する


サムネイル画像か、元画像かの判定には
strpos() を使う
http://php.net/manual/ja/function.strpos.php

$image の中から thumbnail という文字列を探し
位置が０文字目から始まる
つまり ===0 であるか判定する

注意点としては
strpos() は
対象文字列が見つからなかった場合に
false を返すため ==0 だと true になるので
0文字目という判定にしたいのなら
===0
とすること

なので、判定の条件式は
if(strpos($image, 'thumbnails/') === 0):
となる

そして、サムネイル画像だったときの処理で
元画像のリンクを作成するとき、その名前の表示には
basename() を使う

basename() はファイル名そのものの情報だけ引っ張ってくする
http://php.net/manual/ja/function.basename.php
を参照

<a href="/images/<?php echo basename($image); ?>">
<img src="<?php echo $image; ?>">
</a>
これでリンクを作成

元画像の表示については

<?php else : ?>
<img src="<?php echo $image; ?>">
<?php endif; ?>

となる

画像掲示板のデバッグ

画像掲示板のデバッグ

#14 デバッグをする
http://dotinstall.com/lessons/upload_image_php/4514
を参考に、サムネイル画像が保存できるようにデバッグ

まず、細かいエラーを表示するように、
config.php の
error_reporting(E_ALL & ~E_NOTICE);
をコメントアウト

index.php に戻ってしまうと、細かいエラーがでなくなるので
header（）の処理の前に
exit;
を記述して、一度終了する

原因は、エラーコードをみながら修正していく

今回の動画の場合だと
imagecopyresampled() の
第１引数が、書き込むイメージのリソースでなかったこと
そして
書き込むディレクトリが
THUMBNAIL
ではなく
THUMBNAIL_DIR
だったことが原因だっと判明

エラーが特定できたら、
config.php のエラー表示を元に戻したいので
error_reporting(E_ALL & ~E_NOTICE);
のコメントアウトを外す

このように、一度詳細なエラーを表示して

どこかにとぶような処理の場合、その前に
一度 exit で終了して原因を追及するようにして
デバッグしていく

今回、うまく動作しなかったので、後で比較して理解するため
cp upload.php upload.php_error
として
保存し
http://dotinstall.com/lessons/upload_image_php/4513
のソースをコピペして
実行

そのときにいくつかエラーがでたので
そのメモ

Warning: imagecopyresampled() expects parameter 1 to be resource, double given in
これは
imagecopyresampled() の第１引数がリソースでないのが原因
$thumbHeight から
thumbImage　にする

Notice: Use of undefined constant THUMBNAIL - assumed 'THUMBNAI
と
Warning: imagepng(): Unable to open 'THUMBNAIL/5190816f6d00cce6c8bb909ef954cc1840c50a0c.png' for writing: No such file or directory

これは
'THUMBNAI　が見つからないとでているので

config.php で指定している
'THUMBNAI_DIR にする

また、
Warning: imagepng(): の原因は
config.php の
define('THUMBNAIL_DIR', dirname($_SERVER['SCRIPT_FILENAME']).'/thumbnails');
のスペルミスが原因だった

これらを修正すれば
サムネイル画像が保存されるようになる

CentOS へログインして
cd /var/www/html/upload_image_php
ll image/
で画像がアップロードされているのを確認し

ll thumbnails/
でサムネイル画像があるのを確認できれば
デバック完了

画像掲示板で縮小画像の保存

画像掲示板で縮小画像の保存

#13 縮小画像を保存する
http://dotinstall.com/lessons/upload_image_php/4513
を参考に、
縮小画像を保存フォルダに格納し、動作確認する

そのためには、まず画像形式を
switch() で識別する

switch($imagesize['mime']){
で判別し

case 'image/gif':

case 'image/jpeg'

case 'image/png'
ごとに分岐する

このときに使っている
imagegif()
http://manual.xwd.jp/function.imagegif.html

imagejpeg()
http://php.net/manual/ja/function.imagejpeg.php

imagejpeg()
http://php.net/manual/ja/function.imagepng.php
は、それぞれのファイル拡張子にあわせたものを使い
イメージをファイルに出力している

それぞれ、
第１引数に保存する画像
第２引数に保存するファイル名
を指定する

ソースにすると

gif なら

imagegif(
//対象ファイル
$thumbImage,
//保存先
THUMBNAIL . '/' . $imageFileName);

とする

最後に、index.php に戻すには
header() を使えばOK

header('Location :http://' .$_SERVER['SERVER_NAME'].'/upload_image_php');
とする

縮小画像の作成

縮小画像の作成

#12 縮小画像を作る (2)
http://dotinstall.com/lessons/upload_image_php/4512
を元に
元画像の縦横比率を保ったまま、縮小画像を生成

まず、サムネイル画像の高さを作る
縦横比をそのまま使う

$thumbheight = round($height * THUMNAIL /$width);

round() は浮動小数点をまとめる関数
http://php.net/manual/ja/function.round.php
を参考
小数点以下四捨五入と考えるとわかりやすい

これで、サイズ取得はできたので、次に画像作成

$thumbImage = imagecreatetuecolor(THUMBNAIL_WIDTH, $thumbnailheight);

imagecreatetruecolor() は
イメージを新規作成する関数
http://manual.xwd.jp/function.imagecreatetruecolor.html
に解説あり

imagecreatetruecolor() の引数には
横幅、高さを指定する

これらを使った事例としては
No29.大きさを変えようっ(サムネイル) ---- GDライブラリ[3]
http://masago.kir.jp/php20040218.php
をみると分かりやすい

imagecopyresampled()は
再サンプリングを行いイメージの一部をコピー、伸縮する

これは
http://phpspot.net/php/man/php/function.imagecopyresampled.html
を参考にする

今回は
imagecopyresampled(
$thumbnailheight,
$srcImage,
0,0,
0,0,
72,0,
$thumbnailheight,
$width,
$height
);

これを引数の解説つきにすると

imagecopyresampled(
//コピー先の画像
$thumbnailheight,

//コピー元の画像
$srcImage,

//コピー先のx、y座標
0,0,

//コピー元のx、y座標
0,0,

//コピー先の幅、
72,

//コピー先の高さ
$thumbnailheight,

//コピー元の幅
$width,

//コピー元の高さ
$height
);

となる

画像掲示板で縮小画像作成

画像掲示板で縮小画像作成

#11 縮小画像を作る (1)
http://dotinstall.com/lessons/upload_image_php/4511
を参考にサムネイル画像の作成を実装

まず、元画像の幅と高さを取得

$width = $imagesize[0];
$height = $imagesize[1];

縮小画像の作成は
ユーザ定数 THUMBNAIL_WIDTH と比較することで
判定して作成する

if($width > THUMBNAIL_WIDTH){
で比較できる

サムネイル画像をつくる手順は
元ファイルを画像タイプにより作成
新しいサイズを作成
縮小画像の作成
縮小画像を保存

という手順で行われる

元ファイルの画像タイプの判別は
switch の画像判定を使えばOK

switch($imagesize['mime']){
case 'image/gif':
$srcImage = imagecreatefromgif($imageFilePath);
break;

case 'image/jpeg':
$srcImage = imagecreatefromjpeg($imageFilePath);
break;

case 'image/png':
$srcImage = imagecreatefrompng($imageFilePath);
break;
}

とする

switch() の判定のところで使っている関数の

imagecreatefromgif()
http://phpspot.net/php/man/php/function.imagecreatefromgif.html

imagecreatefromjpeg()
http://phpspot.net/php/man/php/function.imagecreatefromjpeg.html

imagecreatefrompng()
http://manual.xwd.jp/function.imagecreatefrompng.html

は、画像タイプの自動判別に使える関数