画像サイズ取得 - PHPプロ！Q&A掲示板

1249

0P

画像サイズ取得

質問日時 / 2008年6月19日 17:42 回答数 / 5件

Questioner: agupx Tweet

キーワード / キーワードが設定されていません

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

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

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

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

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

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

この質問に返信

ツリー一覧

画像サイズ取得agupx

A01weekendphp配列内の画像タグを生成するスクリプト、という事であ

A01-1agupxお返事ありがとうございます。やはり画像までのパス

A01-1-1kaitauこんばんわ > width,heightは省略可能な事はわかっ

A01-1-1-1agupxお返事ありがとうございます。＞W3C勧告において

A01-1-1-1-1TorrySegallwidth, height 属性は、値が指定されていればブラウ

回答一覧

A01
answererweekendphp [6月19日 18:43]

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

<?php
// 配列の定義
$img_array = array(
'./img/logo.png',
'./img/path/to/image.gif',
'./img/path/to/image.jpeg',
'./img/path/to/image.png'
);
foreach ($img_array as $value) {
echo get_image_tag($value);
}
function get_image_tag($file)
{
if (!file_exists($file)) {
// ファイルが無ければfalse
return false;
}
list($width, $height, $type, $attr) = getimagesize($file);
return "<img src=\"{$file}\" $attr alt=\"example\" />";
}

参考まで。

A01-1
replyeragupx [6月19日 20:25]

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

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

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

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

A01-1-1
replyerkaitau [6月19日 21:47] (最終編集：6月19日 22:09)

こんばんわ

> 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の内容から画像の指示を抜き出して力技で取得する、という方法もあります。
いっつもやってるとスクリプトの負荷がちょっとあるかもしれませんが。

以下サンプル

<?php
/**
* 正規表現を用いてimgタグを検出して、imgタグにsizeをつける関数を呼ぶ。
*/
function imgsize_substitute($val) {
$val = preg_replace_callback('|<img(.*?)src="(.+?)"(.*?)>|i','set_img_size',$val);
return $val;
}
/**
* 正規表現で検出された中身からファイル名を取り出し、画像サイズを求めてタグの属性につける。
* $matched[0] - preg_replace_callback で「マッチした全体」
* $matched[1] - preg_replace_callback で「imgよりあと、src="..."より前にマッチした部分」
* $matched[2] - preg_replace_callback で「src="..."でマッチした中身」
* $matched[3] - preg_replace_callback で「src="..."以降タグが終わるまでの中身」
*/
function set_img_size($matched) {
//既にsize属性を持っていたら、何もしない
if( strpos($matched[1],'size') !== false
|| strpos($matched[3],'size') !== false ) {
return $matched[0];
}
$imgsrc = $matched[2];
if( strpos($imgsrc,'http://') === false ) {
// 'http://'で始まるソース名でない場合
if( strpos($imgsrc,'/') === 0 ) {
// '/'で始まるソース名の場合は、DOCUMENT_ROOTを付与。
$imgsrc = $_SERVER['DOCUMENT_ROOT'].$imgsrc;
} else {
//それ以外の場合は、現在のスクリプトのパスを付与
$imgsrc = dirname($_SERVER['SCRIPT_FILENAME']).DIRECTORY_SEPARATOR.$imgsrc;
}
}
$sizes = getimagesize($imgsrc);
//取得に失敗したら、何もしない
if( $sizes === false ) {
return $matched[0];
}
$tag = "<img${matched[1]}src=\"${matched[2]}\" width=\"${sizes[0]}\" height=\"${sizes[1]}\"${matched[3]}>";
return $tag;
}
//出力内容をバッファリングしてimgsize_substitute関数に渡す
ob_start("imgsize_substitute");
?>
<html>
<body>
test:
<hr />
<div>
同じ場所のhoge.gif<br />
<img src="hoge.gif" alt="" />
</div>
<div>
一つ上の階層のhoge.jpg<br />
<img src="../hoge.jpg" alt="" />
</div>
<div>
他の場所のhoge.gif<br />
<img src="/another_dir/hoge.gif" alt="" />
</div>
</body>
</html>

上記ソースの結果の実際のブラウザのHTMLソースの例：

<html>
<body>
test:
<hr />
<div>
同じ場所のhoge.gif<br />
<img src="hoge.gif" width="30" height="30" alt="" />
</div>
<div>
一つ上の階層のhoge.jpg<br />
<img src="../hoge.jpg" width="233" height="170" alt="" />
</div>
<div>
他の場所のhoge.gif<br />
<img src="/another_dir/hoge.gif" width="180" height="180" alt="" />
</div>
</body>
</html>

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

A01-1-1-1
replyeragupx [6月19日 22:20]

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

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

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

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

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

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

A01-1-1-1-1
replyerTorrySegall [6月21日 04:04]

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

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

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

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

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

以上、蛇足ながら。

<<質問一覧へ