画像表示について質問です。 - PHPプロ！Q&A掲示板

1081

  • 0P

画像表示について質問です。

質問日時 / 2008年4月3日 22:52    回答数 / 12件

Questioner:  soulsurvivores  このエントリーをはてなブックマークに追加 

キーワード / サムネイル    画像表示   

だいぶ前に質問させてもらったクワです。よろしくお願いします。

今ＰＨＰ＋ＭｙＳＱＬでブログを作成しています。
今回の質問は画像一覧の表示の仕方です。

一応サンプルを用意したので確認してほしいのですが（http://music.geocities.jp/soul_kuwa/index2.html）
画像を登録してサムネイルを作成します。サムネイルはうまく作成できたのですがサンプルのような画像表示の仕方がわかりません。

ＳＱＬは
CREATE TABLE `blog_image` (
  `id` int(11) NOT NULL auto_increment,
  `images` varchar(255) NOT NULL default '',
  `thumb_images` varchar(30) default NULL,
  `title` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id`)
);
としています。

画像表示数は18件で9件目で</TR><TR>を入れて段差を入れたいのですがどうやっていいのやら困っています。初歩的な質問で申し訳ないですがお分かりの方ご伝授お願いします。

あと最後に質問ですがサムネイルの作成で元の画像を縮小してサムネイルを作成するのはうまくいったのですが、画像の中心点か切り抜いてサムネイルを作成したいのですがこれもお分かりの方ご伝授よろしくお願いします。

この質問への意見の募集は締め切られ、ポイントは既に配分されました。
意見を投稿することはできますが、ポイントを受け取ることはできません。



ツリー一覧

Q画像表示について質問です。soulsurvivores
┗A01pascalテーブルの生成はこんな感じのことですよね？ >>CODE
　┗A01-1kaitauこんにちは。 えっと、一覧の生成について問題点が
　　┗A01-1-1soulsurvivorespascalさん、kaitauさん、お返事ありがとうございます
　　　┣A01-1-1-1pascal申し訳ない。修正します。 >>CODE <?php // DBの接
　　　┗A01-1-1-2pascal中央部の切り出しです。 >>CODE <?php // 画像の中
　　　　┗A01-1-1-2-1soulsurvivorespascalさん、ご伝授ありがとうございました。 サムネ
　　　　　┣A01-1-1-2-1-1pascal見落としてました。 サムネイルのファイルがあるか無
　　　　　┃┗A01-1-1-2-1-1-1pascal自己レスに近いですが、色々と漏れていたので表示部分
　　　　　┗A01-1-1-2-1-2kaitauえーと。 もし、９個まで埋まっていない場合に、残り
　　　　　　┗A01-1-1-2-1-2-1soulsurvivorespascalさん、丁重なソース感謝します。 kaitauさん、
　　　　　　　┗A01-1-1-2-1-2-1-1kaitauこんばんは。 私は、「こういう考え方でやれば動く
　　　　　　　　┗A01-1-1-2-1-2-1-1-1soulsurvivoreskaitauさん、すいませんでした。 自分で色々と試して

回答一覧

並び替え：

A01
answererpascal [4月4日 13:03]

テーブルの生成はこんな感じのことですよね？
  1. <?php
  2. // DBの接続等は終わっているものとします
  3. define("MAX_COLS", "9");
  4.  
  5. $table = "<table>";
  6. while($row = mysql_fetch_array($result)){
  7.   $table .= "<tr>"
  8.   for($i=0;$i<MAX_COLS;$i++){
  9.     $table .= '<td><a href="'.htmlspecialchars($row['images'], ENT_QUOTES).'"><img src="'.htmlspecialchars($row['thumb_images'], ENT_QUOTES).'"></a></td>';
  10.   }
  11.   $table .= "</tr>";
  12. }
  13. $table .= "</table>";
  14. echo $table;
  15. ?>

画像中心部の切り出しは、
　１．imagesx と imagesy を使って元画像の大きさを取得
　２．元画像の大きさとサムネイルのサイズから、切り出し位置の左上角の座標を計算
　３．imagecopy で必要な領域をコピー
　４．コピーした画像をファイルに保存
という流れなんではないかと思いますが、試していないので違ったらすみません。

この意見に回答する

ツリーへ　TOPへ

A01-1
replyerkaitau [4月4日 13:29] (最終編集：4月4日 13:32)

こんにちは。

えっと、一覧の生成について問題点が２つほど。
・おそらく同じ画像を９個並べる事になってしまう
・DBから拾った数だけ、縦に並んでしまう

ので、
・whileループ開始前に<tr>、終了後に</tr>
・whileループ内でカウントを取って９の倍数を超えるごとに </tr><tr>
だと思います。

この意見に回答する

ツリーへ　TOPへ

A01-1-1
replyersoulsurvivores [4月4日 13:59]

pascalさん、kaitauさん、お返事ありがとうございます。
テーブルの段差はうまくいきましたがkaitauさんの言うとおり同じ画像が9個並べられてる状態です。
画像がない場合はサンプルページ（http://music.geocities.jp/soul_kuwa/index2.html）でいうとnoImage.gifが表示されるようにしたいのですが、これはどうすれば良いのでしょうか？
あとサムネイルの切抜きの件ですがもう少し詳しく教えてもらえたら幸いです。
よろしくお願いします。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-1
replyerpascal [4月4日 18:23]

申し訳ない。修正します。
  1. <?php
  2. // DBの接続等は終わっているものとします
  3. define("MAX_COLS", "9");
  4.  
  5. $cols = 1;
  6. $table = "<table>";
  7. while($row = mysql_fetch_array($result)){
  8.   if($cols == 1){
  9.     $table .= "<tr>";
  10.   }
  11.   
  12.   $table .= '<td><a href="'.htmlspecialchars($row['images'], ENT_QUOTES).'"><img src="'.htmlspecialchars($row['thumb_images'], ENT_QUOTES).'"></a></td>';
  13.   $cols ++;
  14.   
  15.   if($cols > MAX_COLS){
  16.     $table .= "</tr>";
  17.     $cols = 1;
  18.   }
  19. }
  20. $table .= "</table>";
  21. echo $table;
  22. ?>
ちなみに、一旦変数に入れて後でまとめて表示していますが、都度表示してしまっても全く問題ありません。
DBの文字エンコーディングと表示時の文字エンコーディングが一致しない場合は、一旦変数に入れた方が楽だと思いますが。
（と言っても、サムネイルの一覧を表示するだけなら文字エンコーディング関係ないですが。）

画像の切り抜きについては後ほど。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2 参考になった
replyerpascal [4月4日 18:48]

中央部の切り出しです。
  1. <?php
  2. // 画像の中心部の切り出して保存します
  3.  
  4. // 切り出すサイズ
  5. define("DST_WIDTH", 32);
  6. define("DST_HEIGHT", 32);
  7.  
  8. // 元画像を読み込み
  9. $src_img = imagecreatefromjpeg("sample.jpg");
  10. // 元画像のサイズを取得
  11. $src_width = imagesx($src_img);
  12. $src_height = imagesy($src_img);
  13. // 切り出し開始位置を計算
  14. $src_x = $src_width / 2 - DST_WIDTH / 2;
  15. $src_y = $src_height / 2 - DST_HEIGHT / 2;
  16. // 切り出し画像のリソースを作成
  17. $dst_img = imagecreatetruecolor(DST_WIDTH, DST_HEIGHT);
  18. // 中央部を切り出し
  19. if(imagecopy($dst_img, $src_img, 0, 0, $src_x, $src_y, DST_WIDTH, DST_HEIGHT)){
  20.   // 元画像のリソースを破棄
  21.   imagedestroy($src_img);
  22.   // 切り出した中央部をJpegで保存
  23.   if(imagejpeg($dst_img, "sample2.jpg", 80)){
  24.     echo "中央部を sample2.jpg として保存しました。";
  25.   }else{
  26.     echo "中央部の保存に失敗しました。";
  27.   }
  28.   // 切り出し画像のリソースを破棄
  29.   imagedestroy($dst_img);
  30. }else{
  31.   echo "中央部の取得に失敗しました。";
  32. }
  33. ?>

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1
replyersoulsurvivores [4月6日 01:27]

pascalさん、ご伝授ありがとうございました。
サムネイルのほうはうまくいきました！
申し訳ないのですが最初の質問したサムネイル表示で画像が登録された場合とそうではない表示の仕方を教えてもらえたらうれしです。自分でも色々と試行錯誤してますがうまくいっていないのが現状です・・。

サンプルページ
http://music.geocities.jp/soul_kuwa/index2.html

お分かりの方よよろしくお願いします。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-1
replyerpascal [4月7日 08:39]

見落としてました。
サムネイルのファイルがあるか無いかの判断でいいんですよね？
  1. <?php
  2. // サムネイルのファイル名
  3. $filename = "sample.jpg";
  4. // ファイルが存在するか確認
  5. if(is_file($filename)){
  6.   // ファイルが存在するのでサムネイルを表示
  7. }else{
  8.   // ファイルが存在しないのでNoImageを表示
  9. }
  10. ?>

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-1-1
replyerpascal [4月7日 12:50]

自己レスに近いですが、色々と漏れていたので表示部分についてまとめました。
  1. <?php
  2. // DBの接続等は終わっているものとします
  3. define("MAX_COLS", 9);  // 表示列数
  4. define("NO_IMAGE", "noimage.jpg");  // 画像が無い場合の画像
  5. define("NO_THUMB", "nothomb.jpg");  // サムネイルが無い場合の画像
  6.  
  7. // この変数で列番号を管理
  8. $cols = 1;
  9. // この変数に表示内容をとりあえず入れておく
  10. $table = "<table>";
  11.  
  12. while($row = mysql_fetch_array($result)){
  13.   // 画像がある場合のみ処理する
  14.   if(is_file($row['images'])){
  15.     // 1列目だったらtrタグを追加
  16.     if($cols == 1){
  17.       $table .= "<tr>";
  18.     }
  19.     
  20.     // サムネイル画像があれば利用、無かったら無い時用の画像を利用
  21.     if(is_file($row['thumb_images'])){
  22.       $thumb_images = $row['thumb_images'];
  23.     }else{
  24.       $thumb_images = NO_THUMB;
  25.       // 無い時用の画像を利用するのではなく、動的に生成するのもアリかも
  26.       // 大量に生成する必要がある場合の負荷等も考慮する必要有り
  27.     }
  28.     
  29.     // 表示データを格納
  30.     $table .= '<td><a href="'.htmlspecialchars($row['images'], ENT_QUOTES).'"><img src="'.htmlspecialchars($thumb_images, ENT_QUOTES).'"></a></td>';
  31.     // 列カウントをインクリメント
  32.     $cols ++;
  33.     
  34.     // 指定列数の表示が終わっていたらtrタグを閉じて列カウントをリセット
  35.     if($cols > MAX_COLS){
  36.       $table .= "</tr>";
  37.       $cols = 1;
  38.     }
  39.   }else{
  40.     // 画像が見つからなかったら、その時用の画像を表示
  41.     $table .= '<td><img src="'.htmlspecialchars(NO_IMAGE, ENT_QUOTES).'"></td>';
  42.   }
  43. }
  44.  
  45. // 指定列数に満たない場合
  46. if($cols < MAX_COLS and $cols != 1){
  47.   // tdタグを必要数追加
  48.   for($i=$cols;$i<MAX_COLS;$i++){
  49.     // 空のtdタグで数を合わせる場合は以下
  50.     $table .= "<td></td>";
  51.     // 何らかの画像を表示する場合は以下のような感じで
  52.     // $table .= '<td><img src="'.htmlspecialchars(NO_IMAGE, ENT_QUOTES).'"></td>';
  53.   }
  54.   // trタグを閉じる
  55.   $table .= "</tr>";
  56. }
  57.  
  58. // tableタグを閉じる
  59. $table .= "</table>";
  60.  
  61. // 表示
  62. echo $table;
  63. ?>

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-2
replyerkaitau [4月7日 11:24]

えーと。
もし、９個まで埋まっていない場合に、残りをno image で埋めたいのなら。

pascalさんが提示されたループの中で、「今何列目か」と数えるのを
担当している変数がありますよね。
それを利用すれば、「表示する」ループが終わったあとに、
９－何列目
が、残り何列表示すればいいか、という事になるので、
それを参考に残りの列数分ループを廻してno image用の画像を
表示させましょ。

この手のロジックは一列に表示させる個数が９個ちょうどの時とかに
ハマりやすいので、その辺もご注意を。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-2-1
replyersoulsurvivores [4月8日 06:12]

pascalさん、丁重なソース感謝します。
kaitauさん、すいませんがもう少しわかり易く教えてもらえたら幸いです。
今のところ画像が意見しか表示されません・・・
よろしくお願いします。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-2-1-1
replyerkaitau [4月9日 21:31] (最終編集：4月9日 21:32)

こんばんは。

私は、「こういう考え方でやれば動くはず」っていう道筋を出しているだけなので、
「もう少しわかり易く」っとおっしゃられても、「じゃあどの方法がわかりませんか」
くらいしか現状では返せません。
それに、私の前回の意見分はpascalさんが提示されているコードに吸収されているみたいですし。

もしサンプルコードで満足できなければ、まずやるべき機能を実現するための手順を整理されてみてはいかがでしょうか。

この意見に回答する

ツリーへ　TOPへ

A01-1-1-2-1-2-1-1-1
replyersoulsurvivores [4月10日 04:59]

kaitauさん、すいませんでした。
自分で色々と試してみます。

この意見に回答する

ツリーへ　TOPへ

<<質問一覧へ



Pick Up Q&A

Q
負荷時のmysql_connect()エラー
 このエントリーをはてなブックマークに追加 
A
これはPHPというよりOSまたはMySQLのコミュニティで質問されたほうがいいと思います。 ぱっと思いついた範囲で記すと MySQL等のDBに「ある時点において同時に接続可能なクライアントの最大数」に制限があるよう...

>>続きを読む

今回のような実践的な経験がエンジニアのキャリアに繋がると思います。是非サービスを成功させて下さい！

▲解説者：岡本（アシアル株式会社 教育コーディネーター兼　システムエンジニア）

Q&A掲示板 新着情報