• 締切済み

読み込み完了後の画像サイズを取得したい

画像ファイルの高さを取得する関数を作成しています。 Imageオブジェクトのheightプロパティの値を取得すればよいだけなの ですが、画像が大きかったりすると読み込み完了前に値を取得してしま うようで、正確な高さが取得できません。 completeプロパティがfalseなら、trueが返ってくるまでheightプロパ ティの値を取得しない・・・といった処理を盛り込んだ関数が作成でき ればと考えていますが、上手く作成できずにいます。 アドバイスをよろしくお願いします。 とりあえず、関数本体はこんな感じにしてます。 function getImgHeight(imgSrc) { objImg = new Image(); objImg.src = imgSrc; //読込み完了ならば高さを取得したい //完了するまで待機できたらよいのだけど・・・ return objImg.height; }

みんなの回答

  • m035
  • ベストアンサー率44% (38/86)
回答No.3

onloadで高さを取得する関数を実行するという方法ではだめなんでしょうか? これが一番楽な方法だと思ってるんですが・・・

borichan
質問者

補足

ご回答ありがとうございます。 現在、高さを取得する関数自体が上手く作成できずに困っている状態です。 画像読込み完了後のサイズを取得できる関数の作成方法をご存知でしたら、ぜひご教示下さい。 よろしくお願いします。

全文を見る
すると、全ての回答が全文表示されます。
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

>このようなメッセージが出ない方法で待機できればと考えています。 多分できないと思います。 関数のような形ではなくて、画面上のどこかに表示するという形で値を利用するということであれば、 画面の何処かに値をセットする関数を objImg.onload=setHeight; 見たいな形でイベント登録するといいかもしれません。

borichan
質問者

補足

やはり、関数化するのは難しいでしょうか・・・。 今は、タイマーを利用して、読込み完了まで次の処理に進まないようにしていますが、同様の処理が数箇所あるので、関数を作成して共有使用出来ればと考えたわけです。

全文を見る
すると、全ての回答が全文表示されます。
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

while(!objImg.complete); で、読込完了まで待機できると思いますが・

borichan
質問者

補足

ご回答ありがとうございます。 実は私もこの質問をする前に、同様にwhile文で待機しようとしてみたのですが、この方法では次のようなメッセージが出てしまいます。 「このページのスクリプトが、Internet Explorer の実行速度と遅くしています。スクリプトを実行し続けると、コンピュータが反応しなくなる可能性があります。スクリプトを中断しますか?」 このようなメッセージが出ない方法で待機できればと考えています。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • 画像サイズの読み込み

    お世話になります。 javascriptで画像サイズを取得し、そのサイズに合わせてimgタグhtmlを吐き出すという処理を行っています。 ------------------ var i = new Image();  //**step1 i.src = strPath;  //**step2 hhh = i.height;  //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ 上記において、**step2と**step3の間に、alert文を入れると、うまく画像サイズを取得できるのですが、alertがないと、hhh = 0 になってしまいます。 (うまくいくケースは以下↓) ------------------ var i = new Image();  //**step1 i.src = strPath;  //**step2 alert("sdf"); hhh = i.height;  //**step3 document.getElementById('aaa').innerHTML ='<img src="" id="backImage" height="' + hhh + '"></img>'; ------------------ なぜでしょうか・・・かれこれ数時間悩んでいろいろ試してみましたが、原因がサッパリわかりません。 ちなみに、hhh = 0 になるのは、最初の1回だけ、二度目にここを通ると、alertがなくてもhhhには正しく数値がセットされます。 どなたか、何かヒントになるようなことでもあれば、おしえてください。よろしくおねがいします。

  • imageタグの画像データを取得するには?

    現在とある理由から、imageタグで取得した画像データをBase64エンコードしようとしています。 しかしながら、imageタグのどのプロパティにアクセスすれば画像データそのもの(srcに格納されているurlではなく)が取得できるかわかりません。 どうすればよいのでしょうか?

    • ベストアンサー
    • HTML
  • JavaScript/jQuery で元画像ファイルのサイズの取得

    JavaScript/jQuery で元画像ファイルのサイズの取得 次のコードを考えましたが、動作が不確定な点があります。状況と対応方策をお教えください。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="subf/jquery-1.4.2.min.js"></script> <script type="text/javascript"> var pW; var pH; $(function() { newImg(); alert(pW); alert(pH); }); function newImg() { var newImg = new Image(); newImg.src = 'subf/' + "HighJinks_Ni.jpg"; alert("New Image"); //この行をコメントとすると pW=0,pH=0 となる。   pW=(newImg.width); pH=(newImg.height); } </script> </head> <body> </body> </html>  上のコードで画像のwidth とheight の値が得られるのですが、alert("New Image"); の行をコメントとすると、正確な値得られず0となります。  対応の方法をお教えください。

  • 画像切り替え

    <div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。

  • マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています

    HTMLのホームページにおいて、マウスをアイコンに乗せたとき、画像が変わるGalleryを作りたいと思っています。 色々なページを見て、 (前略) <SCRIPT> <!-- function In(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} function Out(ImgSrc){ document.images['SCR'].src = "images/"+ImgSrc;} --> </SCRIPT> (中略) /*ボタン1 ここにマウスを乗せて画像1を変更する*/ <IMG onmouseover="In('gra01L.jpg')" onmouseout="Out('gra00.jpg')"src="botan_gra01.jpg" border="0"></TD> /*画像1*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> /*ボタン2 ここにマウスを乗せて画像2を変更する*/ <IMG onmouseover="In('gra01.jpg')" onmouseout="Out('gra00.jpg')" src="botan_gra01.jpg" border="0"> /*画像2*/ <IMG height="300" src="images/gra00.jpg" width="500" border="0" name="SCR"> (後略) というやりかたでを採用したのですが、このやりかただと一つのページにつき、一箇所の画像しか変更させることができません。 (上では図2しか変更できません) 置いたアイコンによって、個別のウィンドーの画像を変更させたいのですが、どのようにすればいいでしょうか。 参考になるHPでもあれば教えてください。

    • ベストアンサー
    • HTML
  • 画像の不完全な読み込みについて

    ロールオーバー(アウト)で画像切り替えをしています。 MacOSX IE 5.xにおいてロールオーバー(アウト)時の画像の読み込みが途中で終わってしまって、不完全な状態で表示されてしまいます。 *****外部jsファイル******** if(document.images){ var hoge_over=new Image(70,162); hoge_over.src="./hoge.gif"; var hoge_out=new Image(70,162); hoge_out.src="./hoge2.gif"; } function xOver(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_over.src"); } } function xOut(imgname){ if(document.images){ document.images[imgname].src=eval(imgname+"_out.src"); } } *****htmlファイル******** <a href="./huge.shtml" onmouseover="xOver('hoge');" onmouseout="xOut('hoge');" target="_self"> <IMG NAME="hoge" SRC="./hoge.gif" width="70" height="162" alt="hoge" title="hoge" border=0></a> ************************** 問題が環境にあるのか、javascriptの書き方にあるのか、htmlの書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。

  • 画像ファイルをアップロードする前に縦横のサイズを取得

    ローカルに保存されている任意の画像を選択(input type=fileなどで) すると、テキストボックスにその画像の縦横サイズを表示するといった 事をやりたいのですが、Javascriptで実現可能でしょうか? img.src = "ファイルパス"; img.height; img.width; でサイズ取得は可能ですが、ファイルパスを直書きするのではなく、 あくまで、任意の画像を選択して取得したいです。 わかる方がいらっしゃいましたらご教授いただきたいと思います。 よろしくお願いします。

  • ASP.NETで画像の高さと幅を取得

    ASP.NETでWebページを作成しています。 画像ファイルを読み込んで表示させ、100%、50%・・・ 画像のサイズを拡大縮小させたいと思ってます。 読み込んだ際の画像の高さ幅を元に50%なら1/2と言う 感じで処理できるかなと思っていたのですが、 読み込んだ画像のサイズ(高さ幅)が取得できません。 取得する方法を教えてください。Imageコントロールに そのまま画像URLをセットし表示させてもHeight、Widthが取得できません。 別な方法で画像の表示サイズを変更できるのでしょうか。

  • ○○.srcだとNetscapeで取得できない

    JavaScriptで画像のプリロードをさせています。 ソースは以下の通りです。 window.onload = function() { for( i = 0 ; i <= 8 ; i++ ){ img[i] = new Image(); img[i].src = (略); } } (略)とした部分では、ファイルアドレスを動的に作成しています。今のところNetscape以外のブラウザではうまく動作していますが、Netscapeではその後の処理が遅く、プリロードが出来ていないんじゃないのかと思って調べてみるとその通りでした。 問題点は、「変数名.src」となっているとその値を取得できていないということでした。例えば上のソースですと、「img[i].src」では値を取得できませんが「img[i]」であれば取得できていました。しかし後者ですとプリロードが出来ないため、従来どおり前者を使わなくてはいけないようです。「変数名.src」の値をNetscapeで取得するにはどのようにしたら良いのでしょうか? 例: hensuu = "変数"; alert(hensuu); //"変数"がアラートで出力される。 hensuu.src = "変数"; alert(hensuu.src);//アラートが出ない。

  • Macのxamppでの画像表示について

    Macのxamppでweb作成をしています。 その際に画像が表示されず困っています。 <img src="image/1.png" width="217" height="70" alt=""/> というパス指定で画像を表示させようとしているのですが、 ブラウザ上で表示することができません。 ※index.phpと同じフォルダ内にimageというフォルダを作り、そこに画像を入れています。 一方で、 <img src="image/logo.png" width="200px" height="80px" alt=""> と指定した、logo.pngに関しては表示することができています。 質問内容に過不足等あるかと思いますが、教えていただければ幸いです。

fp-60x マイク接続について
このQ&Aのポイント
  • ゼンハイザーe945のマイクをfp-60xに接続する方法について質問です。
  • 電子ピアノのフォン端子にはアンバランスの2芯とバランスの3芯のどちらが使えるのか知りたいです。
  • ローランドのYouTube動画ではフォン端子が3芯となっているので、正確な情報を知りたいです。
回答を見る