- 締切済み
画像の幅、高さを取得したい
- みんなの回答 （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)">
お礼
回答ありがとうございます。 無事表示できました。 これをボタンを押したら表示、というのではなくて、変数に組み込む、というようにしたい場合はどのようにしたらいいのでしょうか？
関連するQ&A
- 画像の幅と高さを取得したい
はじめましてこんにちわ。 <input type="file">で、送られた画像の高さと、幅を取得したいのですが、どうしたら良いのでしょうか。 困っています。 ご教授お願いいたします。 良いCOMコンポーネントありましたら。教えてください。
- ベストアンサー
- Microsoft ASP
- テーブル幅を自動で画像幅にしたい。
以下のjavascriptコードで、画像幅を取得し、テーブル幅を設定するために、 <table class="priceLabel" width="imgWight();"> と書いているのですが、幅が設定されません。 やり方が判らなくて、困っております。 ご存知の方がおられましたら教えてください。 よろしくお願い致します。 <script language="JavaScript"> <!-- // pulldownmenu {literal} function imgWight() { var MyImg = new Image(); MyImg.src = "imgs/skblpnkyllw1.gif"; return(MyImg.width); } //--> </script>
- ベストアンサー
- JavaScript
- ASP.NETで画像の高さと幅を取得
ASP.NETでWebページを作成しています。 画像ファイルを読み込んで表示させ、100%、50%・・・ 画像のサイズを拡大縮小させたいと思ってます。 読み込んだ際の画像の高さ幅を元に50%なら1/2と言う 感じで処理できるかなと思っていたのですが、 読み込んだ画像のサイズ(高さ幅)が取得できません。 取得する方法を教えてください。Imageコントロールに そのまま画像URLをセットし表示させてもHeight、Widthが取得できません。 別な方法で画像の表示サイズを変更できるのでしょうか。
- 締切済み
- Microsoft ASP
- HTMLに張ってある画像を取得
URLを指定して、画像を取得使用と思っているんですが、そういうのが規制されていて、別のHTMLに飛ばされてしまいます。 これを回避する方法ってありませんか？
- ベストアンサー
- Java
- htmlメルマガで幅を固定するには？
現在複数のサイトで更新されたら必要な部分のｈｔｍｌを取得して自分にメルマガとして送信するプログラムを作成しています。 ｈｔｍｌに関してまったくの無知ですので教えていただきたいことがあります。すべてのメールで横幅を固定したいのですが、どんなサイトのｈｔｍｌでも幅を固定してメルマガにするにはｈｔｍｌタグにどのような処理をすればよいのでしょうか？ table,imgタグ以外にどのようなタグに幅情報を挿入すればよいのでしょうか？ 更新されたサイトから得られたｈｔｍｌはサイトがそれぞれ違いますのでそれぞれのタグに対して幅を指定するのは、すべてに対応する正規表現はどうすればよいかはｈｔｍｌをもっと勉強しないとかけないので、できれば取得したｈｔｍｌテキストの最初と最後に幅を指定する何かのタグを挿入するだけにしたいのですが、それでは崩れてしまうのでしょうか？ どのようなことを気にすれば、すべてのメルマガの幅が固定できるか教えてださい。よろしくお願いします
- 締切済み
- HTML
- セルの幅について
htmlで指定した幅と開発者ツールで確認した実際の幅、JQUERYで取得できる幅 それぞれ違うのはなぜでしょうか。 具体的なｈｔｍｌは以下のようなものです。 table-layout: fixedは都合により使う事ができません。 <script src="./jquery.js" type="text/javascript"></script> <table border="1"> <colgroup> <col width="10"> <col width="20"> <col width="30"> </colgroup> <thead> </thead> <tbody> <tr> <td class="a">a</td> <td class="b">b</td> <td class="c">c</td> </tr> </tbody> </table> <script type="text/javascript"> alert($('.a').width()); </script> 開発者ツールで確認すると左から14 24 34の幅になります。 また、jqueryでセルの幅をwidth()で取得すると 12 22 32となります。 指定 使用しているブラウザはIE8 / IE6です。
- 締切済み
- HTML
- 画像のピクセルの取得方法
HTMLのイメージマップ機能を使って、画像にリンクを貼ろうとしています。 動的にリンクを作ろうとしているんですが、perlでイメージの縦、横のピクセルを取得する方法が解りません。 ピクセル取得後、計算して、リンクを貼ろうと考えています。 方法をご存知の方、教えてください。
- ベストアンサー
- Perl
- 外部サイトから画像情報を取得する方法
外部サイトにある画像データを取得する方法がからないので教えてください。 http://www.pinterest.com/ を使ってみたら、ピンする際にURLを入力すると 入力したサイトの画像データが読み込まれます。※説明が難しいので画像を見てください。 しかもすべての画像データではなく一部の画像データが読み込まれます。 PHPかJqueryあたりで処理していると思いますが 詳しい方教えてください。 HTML,CSS,PHP,javascriptなら多少わかります。
- ベストアンサー
- PHP
- [HTML][CSS] 画像の高さを揃えるには？
HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例： <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと： 要件1. <div>内の写真の数によって幅を固定させたい。 例：写真が3枚なら、1枚あたりの幅は3/画面幅。 要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。 例：写真1の高さ200px、写真2の高さ250px、写真3の高さ100px →写真1~3の高さを100pxとしたい。 要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。 →幅をベースとして高さを動的にトリミングしたい。 読み込んだポストによって幅や高さが変わるので、 css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。 （<div style="xxxxx">とか<img style="yyyy">とか。） clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか？
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 ＞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"; ということでしょうか？ こうすると、どうやら動きがおかしくなるのですが。。。。