アシアル株式会社主催　開発者向け、一歩先をいくためのテクニカルセミナー

<< MySQLでの文字化け 質問一覧 掲示板の同時投稿 >>
  • キーワードが設定されていません

  • 0P
画像サイズ取得

画像のサイズを取得して表示させたくマニュアルを調べたところ以下の方法で実現できました。

  1. list($width, $height, $type, $attr) = getimagesize("./img/logo.png");
  2. echo "<img src=\"./img/logo.png\" $attr alt=\"example\" />";

この場合./img/logo.pngのみに有効なのですがサイズを取得したいファイルが複数ある場合
どのようにすれば可能でしょうか？

表示する画像の拡張子は.jpg,.gif,.pngなので配列で定義しgetimagesizeを応用してなんとか
できないものかと自分なりに調べてみましたが情報が見つかりませんでした。

画像ファイル名は規則性がなく階層も異なる場合もあるの無理を承知での質問とはなりますが
宜しくお願い致します。

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

Q画像サイズ取得　agupx　　[06月19日 17時42分]　
┗Re:画像サイズ取得　weekendphp　　[06月19日 18時43分]　
  ┗Re:Re:画像サイズ取得　agupx　　[06月19日 20時25分]　
    ┗満開Re:Re:Re:画像サイズ取得　kaitau　　[06月19日 21時47分]　
      ┗Re:Re:Re:Re:画像サイズ取得　agupx　　[06月19日 22時20分]　
        ┗img要素の、width, height 属性について　TorrySegall　　[06月21日 04時04分]　

コメント一覧

並び替え（ ツリー順 / 投稿順[降順] / 投稿順[昇順] ）

Re:画像サイズ取得

配列内の画像タグを生成するスクリプト、という事であれば、
下記のような感じかと。

  1. <?php
  2.     // 配列の定義
  3.     $img_array = array(
  4.             './img/logo.png',
  5.             './img/path/to/image.gif',
  6.             './img/path/to/image.jpeg',
  7.             './img/path/to/image.png'
  8.         );
  9.  
  10.     foreach ($img_array as $value) {
  11.         echo get_image_tag($value);
  12.     }
  13.  
  14.     function get_image_tag($file)
  15.     {
  16.         if (!file_exists($file)) {
  17.             // ファイルが無ければfalse
  18.             return false;
  19.         }
  20.  
  21.         list($width, $height, $type, $attr) = getimagesize($file);
  22.         return "<img src=\"{$file}\" $attr alt=\"example\" />";
  23.     }

参考まで。

Re:Re:画像サイズ取得

お返事ありがとうございます。
やはり画像までのパスを全て定義しないとできませんよね・・・

画像の並びやファイル名が連番などの規則性を持っているのであれば教えて頂いた方法よりも
さらにスムーズに実行することができると思うのですが今回は規則性を持ち合わせていない場合の
ケースで

できれば
<img src="hoge.gif" . $size . alt="" />
<img src="hoge.jpg" . $size . alt="" />
<img src="hoge.jpg" . $size . alt="" />
のように画像表示のhtmlはべた書きでwidth,heightは自動で取得し表示するという形式に
できればと思っておりました。


width,heightは省略可能な事はわかっているのですがhtmlの文法を意識すると省略できずで・・・
画像を変える度にサイズの値も変更するには手間に感じてしまう事もあり質問させて頂きました。

Re:Re:Re:画像サイズ取得

こんばんわ

> width,heightは省略可能な事はわかっているのですがhtmlの文法を意識すると省略できずで・・・
別にhtmlの文法を意識するからといって、width,heightは必須ではないですよ。
W3C勧告においても、alt属性は必須であるとしてますが、
width,heightの必要性には言及していなかったと思います。多分。

imgのalt
http://www.w3.org/TR/html401/struct/objects.html#adef-alt
imgのwidthとheight
http://www.w3.org/TR/html401/struct/objects.html#adef-height-IMG
# それどころかwidthとheightはちょっと上で非推奨と言っているような気がしなくも無い。。。

あと、自動で取得して表示する、という一つの方法として。
htmlの内容から画像の指示を抜き出して力技で取得する、という方法もあります。
いっつもやってるとスクリプトの負荷がちょっとあるかもしれませんが。

以下サンプル
  1. <?php
  2. /**
  3.  * 正規表現を用いてimgタグを検出して、imgタグにsizeをつける関数を呼ぶ。
  4.  */
  5. function imgsize_substitute($val) {
  6.   $val = preg_replace_callback('|<img(.*?)src="(.+?)"(.*?)>|i','set_img_size',$val);
  7.   return $val;
  8. }
  9. /**
  10.  * 正規表現で検出された中身からファイル名を取り出し、画像サイズを求めてタグの属性につける。
  11.  * $matched[0] - preg_replace_callback で「マッチした全体」
  12.  * $matched[1] - preg_replace_callback で「imgよりあと、src="..."より前にマッチした部分」
  13.  * $matched[2] - preg_replace_callback で「src="..."でマッチした中身」
  14.  * $matched[3] - preg_replace_callback で「src="..."以降タグが終わるまでの中身」
  15.  */
  16. function set_img_size($matched) {
  17.   //既にsize属性を持っていたら、何もしない
  18.   if( strpos($matched[1],'size') !== false 
  19.     || strpos($matched[3],'size') !== false ) {
  20.     return $matched[0];
  21.   }
  22.   $imgsrc = $matched[2];
  23.   if( strpos($imgsrc,'http://') === false ) {
  24.     // 'http://'で始まるソース名でない場合
  25.     if( strpos($imgsrc,'/') === 0 ) {
  26.       // '/'で始まるソース名の場合は、DOCUMENT_ROOTを付与。
  27.       $imgsrc = $_SERVER['DOCUMENT_ROOT'].$imgsrc;
  28.     } else {
  29.       //それ以外の場合は、現在のスクリプトのパスを付与
  30.       $imgsrc = dirname($_SERVER['SCRIPT_FILENAME']).DIRECTORY_SEPARATOR.$imgsrc;
  31.     }
  32.   }
  33.   $sizes = getimagesize($imgsrc);
  34.   //取得に失敗したら、何もしない
  35.   if( $sizes === false ) {
  36.     return $matched[0];
  37.   }
  38.   $tag = "<img${matched[1]}src=\"${matched[2]}\" width=\"${sizes[0]}\" height=\"${sizes[1]}\"${matched[3]}>";
  39.   return $tag;
  40. }
  41.  
  42.   //出力内容をバッファリングしてimgsize_substitute関数に渡す
  43.   ob_start("imgsize_substitute");
  44. ?>
  45. <html>
  46. <body>
  47. test:
  48. <hr />
  49. <div>
  50. 同じ場所のhoge.gif<br />
  51. <img src="hoge.gif" alt="" />
  52. </div>
  53. <div>
  54. 一つ上の階層のhoge.jpg<br />
  55. <img src="../hoge.jpg" alt="" />
  56. </div>
  57. <div>
  58. 他の場所のhoge.gif<br />
  59. <img src="/another_dir/hoge.gif" alt="" />
  60. </div>
  61. </body>
  62. </html>
上記ソースの結果の実際のブラウザのHTMLソースの例：
  1. <html>
  2. <body>
  3. test:
  4. <hr />
  5. <div>
  6. 同じ場所のhoge.gif<br />
  7. <img src="hoge.gif" width="30" height="30" alt="" />
  8. </div>
  9. <div>
  10. 一つ上の階層のhoge.jpg<br />
  11. <img src="../hoge.jpg" width="233" height="170" alt="" />
  12. </div>
  13. <div>
  14. 他の場所のhoge.gif<br />
  15. <img src="/another_dir/hoge.gif" width="180" height="180" alt="" />
  16. </div>
  17. </body>
  18. </html>

====
追記。
http:// で始まる画像名を考慮。変換するかどうかは、allow_url_openの設定値次第

Re:Re:Re:Re:画像サイズ取得

お返事ありがとうございます。

＞W3C勧告においても、alt属性は必須であるとしてますが、
＞width,heightの必要性には言及していなかったと思います。多分。

参照ページが英語だったので読めず確認のためぐぐってみたのですが確かにaltは必須ですが
width,heightに関しては特に触れてないですね・・・

htmlを勉強していた際に何かを見てそのように思い込んでいただけのようで大変失礼致しました。


サンプルのスクリプトですができないものかと思っていたので感激でした！
こんなとこにも正規表現とは全く想像すらできませんでした^^;

確かに毎回実行するとなると負荷が掛かりそうですがせっかくですので実験してみたいと思います！

img要素の、width, height 属性について

width, height 属性は、値が指定されていれば
ブラウザはHTMLを読み込んだ時点で描画サイズを確定できます。
言い換えれば、
当該画像ファイルを取得しきらないうちにページレイアウトが確定するわけで
ページ表示が速くなって快適なブラウジングを提供できる
という根拠によって（W3C勧告云々ではなくTIPSとして）推奨されるものです。

画像が1枚、表示完了となる度に
それよりも下のテキストが移動してしまうので
表示の重いサイトでストレスを感じた。
というような経験はありませんか？

それを防止する効果があるよ。というわけですね。

ですから『HTML講座』を名乗るサイトの中には、
これらを必須と謳った半可通サイトも少なからずあった事でしょう。

いわゆる『物理属性』に相当するものですからW3C非推奨のように思われがちですが、
画像を原寸表示させたい場合にも「CSSで指定しろよ」というのも
サイトのメンテナンス性を考えたら、CSSの理念に反する話でしょうね。
したがって、非推奨属性でもありません。

以上、蛇足ながら。
MySQLでの文字化け 質問一覧 掲示板の同時投稿

ページの先頭へ