- 締切済み
画像の幅、高さを取得したい
指定した画像の幅、高さをHTML、JavaScript、Perlあたりで取得したいのですが、 どのようにしたらいいのでしょうか？
- みんなの回答 （9）
- 専門家の回答
みんなの回答
こんばんは。 また失礼します。 回答と補足の中で、本来的なところが少々見えにくくなってきているので、一旦何をどのようにしたいのかをもう一度整理してみるのがよいように思います。 画像の幅を取得して、その内容をHTML上に反映するケースで、CGIによってその処理が行える場合は、CGIで画像のサイズを取得し、その取得したサイズをHTMLの内容として渡してやるのが良いでしょう。 この場合、CGIがHTMLを生成する時点で、CGIが取得した値を、吐き出すHTMLの中に含めてやれば良いと思います。 なおこのとき、出力されるHTMLにとって、Perlの変数はなんらプログラム的な意図を持たない単なる値ということに注意する必要があるでしょう。 例えば、Perlで$Width="128px"と定義された変数を、以下の処理で書き出すとすれば、 print "<img src=\"hoge\" width=\"$Width\">\n"; print "<p>画像の幅：$Width</p>\n"; この処理の結果として出力される内容は <img src="hoge" width="128px"> <p>画像の幅：128px</p> 上記の"テキスト"です。 もしここで出力結果が<script>要素の中身を吐き出しているとして、そこにPerlの変数を書き出すような処理にしても、それはPerlの変数としてJavaScriptに渡されるのではなく、あくまでもPerlの変数に格納された値をテキストを書き出しているに過ぎません。 ここをまず分けて考えてみる必要がある気がします。 あくまでも、CGIはサーバサイドで稼動するスクリプトで、JavaScriptはクライアントサイドで稼動するスクリプトです。 両者は稼動する範囲が異なりますから、CGIから直接JavaScriptの動作は制御できませんし、JavaScriptがCGIの処理に介在することもできません。 (ついでに触れるなら、この処理の順序は常にCGIが先、JavaScriptが後になります。) CGIのサイドで画像の幅を取得できたとして、それをJavaScriptの変数に渡したいのであれば、CGIで書き出すソースのJavaScriptの部分で、JavaScriptの変数としてCGIで取得した値(テキスト)を定義するよう、CGIに出力させればよいでしょう。 print "<script type=\"text/javascript\"><!--\n"; print "var GAZOUW=$Width\;\n"; print "document.write(GAZOUW)\;\n//--></script>\n"; こうすれば、JavaScriptの変数にCGIで取得した値を直接渡せます。 このCGIの側の変数をHTMLのフォーム内に送り、JavaScriptでそのフォームから値を取り出すという手順を踏むなら、そのフォームから値を取り出す一連の処理はJavaScriptとして完結させる必要があると思いますよ。 その部分は、まずHTMLで組んでみて、動作を確認してから、Perlの出力部分に取り入れてみてはいかがでしょうか。 なお、先の方のお礼・補足にあるJavaScriptの実行結果についてですが、#6のお礼にあるスクリプトは、GAZOU1Wという変数に、FORM1という名前のフォーム要素内にあるIMAGE1という要素が持つwidthプロパティを参照して、その値を格納する処理になっています。 この場合、GAZOU1Wには、IMAGE1という名前をもつimg要素の表示幅が格納されると思います。 同じく#6の補足にあるスクリプトについては、これはFORM1というフォームに含まれるIMAGE1という要素を書き出すようにしています。 元々これはオブジェクトですので、[object]という結果が書き出されているのでしょう。 #7のお礼にあるスクリプトについては、ページロード終了以後にdocument.write()メソッドを実行させるので、エラーがでると思います。 JavaScriptでは、ページがロードされた以後にdocument.write()で内容を追加して書き出すことは基本的にできませんので、このせいでおかしくなっているのでしょう。 お礼の中に挙げているような動作を得るのであれば、まずは任意のテキストボックスから値を取り出して変数に格納するJavaScriptを含むHTMLファイルをPerlではなく自分の手で作成して、それで動作確認を行って実用できるような形にしてから、そのソースをPerlで出力するような形に取り込めばよいと思います。 っと、もう一つ蛇足ついでに… JavaScriptでdocument.image名.widthで取得できる値は、その名前を持つイメージタグ(<img src="hoge.jpg" name="image名">)のブラウザ上での表示領域のサイズです。 これは画像サイズと一致しないケースもありえます(imgタグ内でwidthやheightを指定している場合など)ので、一応注意が必要になるかもしれません。 なお、imgタグ内で表示幅に関する指定がされていないケースでは、画像ファイルの元々のサイズを取得できます。 CGIについてはあまり明るくありませんので、そちらについての私の言及はちょっと難があるかもしれません。 JavaScriptに関しては多少自信があります。 長々と失礼しました。
- feininger
- ベストアンサー率41% (74/180)
画像ファイル名を渡すと幅と高さを返してくれるPerlのサブルーチンは結構、存在しますよ。 画像ファイルのフォーマットをごりごり解析してくれるタイプです。 この手のサブルーチンは画像掲示板などでよく用いられています。 (幅と高さを求めるだけなら数十行のソースです) 下記サイトの imgboard や、 http://www.big.or.jp/~talk/t-club/soft/ 下記サイトの Clip Board などが参考になるかと。 http://www.kent-web.com/
- Ethersky
- ベストアンサー率71% (168/235)
> 例えば、Perlで取得した画像ファイル名を、テキストボックスに入れるとします。 > そのテキストボックスの中身をJavaScriptの変数に…ってなことは無理でしょうか？ できますよ。 JavaScriptの変数への代入処理をonloadで呼んでやればいいと思います。
- Ethersky
- ベストアンサー率71% (168/235)
おーっと忘れ物 > javascriptで表示（というかPerlの変数を使用する）するにはどうしたらいいのでしょうか？ JavaScriptでPerlの変数を利用するのは無理なのでSSIを使うとかPerlに外部JavaScriptを吐かせてそれを読むとか・・・。 （<script type="text/javascript" src="http://～/js.cgi">のように） ちなみに、サーバーにImage::Magickがなければ使えないので、なければ縦横サイズを取得するスクリプトを検索して探してください。（単体でそういうものを作っている方々はけっこういますよ）
お礼
回答ありがとうございます。 ＞サーバーにImage::Magickがなければ使えないので どうやらそのようです（＝＿＝； 例えば、Perlで取得した画像ファイル名を、テキストボックスに入れるとします。 そのテキストボックスの中身をJavaScriptの変数に…ってなことは無理でしょうか？ print "<script language='javascript'> function getsize(){ GAZOU1W = document.FORM1.IMAGE1.width; } </script>\n"; print "<script language='javascript'> getsize() </script>\n"; とかってやってみたんですが。 無理やりなんですけどね…。
補足
print "<script language='javascript'> document.write(document.FORM1.IMAGE1) </script>\n"; としてみたら [object] と出てしまいました。 きちんと認識されてないってことでしょうか？
- Ethersky
- ベストアンサー率71% (168/235)
use Image::Magick; #Image::Magickモジュールをロード $i = Image::Magick->new; #オブジェクト生成 $i->Read("image.gif"); #ファイルを読む（ここではimage.gif） $width = $i->Get('width'); #横取得 $height = $i->Get('height'); #縦取得 $widthに横のサイズ、$heightに縦のサイズが入ります。
ちょっとピンポイントの回答からは外れるかもしれませんが… 前に書いたスクリプトを少し改造してみました。 JavaScriptとHTMLでは、以下のようにすれば画像ファイルの幅をそのページ内だけで取得できます。 こちらのソースでは、別ウィンドウも別ページもリロードも必要ありません。 <html> <head> <script type="text/javascript"><!-- function chgImg(){ document.tgtImg.src=document.f1.enter.value; } function getWH(obj){ tImg= new Image(); tImg.src=obj.src; x=tImg.width; y=tImg.height; if (document.getElementById){ document.getElementById('wid').innerHTML=x; document.getElementById('hei').innerHTML=y; } else{ document.f1.ww.value=x; document.f1.hh.value=y; } } // --></script> </head> <body> <form name="f1" action="#" onSubmit="chgImg(); return false;"> <input type="text" name="enter" size="50"><br> <input type="submit" value="取得"> <input type="reset" value="リセット"> <hr> <p>画像の幅：<span id="wid"><input type="text" name="ww"></span><br> 画像の高さ：<span id="hei"><input type="text" name="hh"></span> </form> <p><img src="***.jpg" name="tgtImg" onLoad="getWH(this)"></p> </body> </html> フォームに画像のURIを入力してサブミットすると、対象の画像を読み込み、その画像の読み込みが終了した時点で、画像の横幅・高さを取得して表示します。 Windows MeのIE6、Netscape7.1、Opera7.11で画像のサイズを正常に取得できることを、一応確認しました。 参考にしてみてください。 もしPerlで画像ファイルの大きさを取得できるとしたら、それはJavascriptと絡めないで、Perlの変数で直接出力した方がスマートな処理になりますよ。 例えば、#3の方の回答の内容をそのまま踏襲すれば、画像の横幅はPerlの$width変数に格納されているはずですから、 print"<p>画像の横幅は$widthです。</p>"; のように、直接$width変数を書き出してやればよいのではないでしょうか。 CGIについては、私には少々曖昧な知識しかありませんので、これ以上の詳細についてはちょっと踏み込むことができないのですが… 参考になれば…
お礼
回答ありがとうございます。 どうやらPerlとJavaScriptって連携が簡単にできないようなんですね（残念） ということは今回はJavaScriptでやるのはかえって面倒になってしまうということになるんでしょうか…。 せっかくjavascriptで光が見えた気がしたのに（＞＜） せっかく教えていただいたのにすいません。 別の機会に使うことがあれば、参考にさせていただきます。
- Ethersky
- ベストアンサー率71% (168/235)
PerlでImage::Magickを使った場合 use Image::Magick; $i = Image::Magick->new; $i->Read("image.gif"); $width = $i->Get('width'); $height = $i->Get('height');
お礼
回答ありがとうございます。 えーと…まったく理解できないのですが…。 もしお時間あれば1行ずつ教えていただけませんでしょうか？ それとjavascriptで表示させようと下記のようにしてみたんですが… print "<script language='javascript'> document.write(document.$GAZOU1.width) </script>\n"; javascriptで表示（というかPerlの変数を使用する）するにはどうしたらいいのでしょうか？
JavaScriptでは、画像ファイルをイメージオブジェクトとして取得し、その画像ファイルの幅と高さを取得する方法があります。 <html> <head> <script type="text/javascript"><!-- var TgtImg=new Image(); //イメージオブジェクトを作成 TgtImg.src="***.jpg"; //イメージオブジェクトに画像を定義 function getWH(){ x=TgtImg.width; //画像の幅を取得 y=TgtImg.height; //画像の高さを取得 alert("幅:"+x+" 高さ:"+y); } // --></script> </head> <body onLoad="getWH()"> </body> </html> 以上のソースを試してみてください。 なお、この場合、ページロードが終了した後にイメージオブジェクトを取得しに行かないと、イメージオブジェクトに画像ファイルをロードできていないうちに画像の幅などを取りに行って、結果的に0が返ることがあります。 縦幅・横幅を取りに行く処理は、onLoadでページロード終了後に実行されるようにするのが良いでしょう。 参考になれば。
お礼
回答ありがとうございます。 参考にさせていただきましたが、どうしても別ウィンドウではなく、html上に横幅を表示させる方法がわかりません！！ print "<script language='javascript'> document.write(document.$GAZOU1.width) </script>\n"; のようにしてみたんですが…。
- mirurin
- ベストアンサー率43% (48/111)
JavaScriptでは <img src="aaa.gif" name="sampleimg"> <input type=button value="幅" onClick="alert(document.sampleimg.width)"> <input type=button value="高さ" onClick="alert(document.sampleimg.height)">
お礼
回答ありがとうございます。 無事表示できました。 これをボタンを押したら表示、というのではなくて、変数に組み込む、というようにしたい場合はどのようにしたらいいのでしょうか？
お礼
回答ありがとうございます。 ＞JavaScriptの変数への代入処理をonloadで呼んでやればいいと思います。 これは print "<BODY onLoad='IMAGE=document.GAZOU1.width'><FONT>\n"; ということではなくて、 print "<script language='javascript'> function getsize(){ GAZOU1W = document.FORM1.IMAGE1.width; document.write(GAZOU1W) } print "<BODY onLoad='getsize()'><FONT>\n"; ということでしょうか？ こうすると、どうやら動きがおかしくなるのですが。。。。