- 締切済み
読み込み完了後の画像サイズを取得したい
画像ファイルの高さを取得する関数を作成しています。 Imageオブジェクトのheightプロパティの値を取得すればよいだけなの ですが、画像が大きかったりすると読み込み完了前に値を取得してしま うようで、正確な高さが取得できません。 completeプロパティがfalseなら、trueが返ってくるまでheightプロパ ティの値を取得しない・・・といった処理を盛り込んだ関数が作成でき ればと考えていますが、上手く作成できずにいます。 アドバイスをよろしくお願いします。 とりあえず、関数本体はこんな感じにしてます。 function getImgHeight(imgSrc) { objImg = new Image(); objImg.src = imgSrc; //読込み完了ならば高さを取得したい //完了するまで待機できたらよいのだけど・・・ return objImg.height; }
- みんなの回答 (3)
- 専門家の回答
関連する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には正しく数値がセットされます。 どなたか、何かヒントになるようなことでもあれば、おしえてください。よろしくおねがいします。
- 締切済み
- JavaScript
- 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となります。 対応の方法をお教えください。
- ベストアンサー
- JavaScript
- 画像切り替え
<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> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- マウスをアイコンに乗せたとき、画像が変わる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の書き方にあるのか分かりませんが、問題が環境にあるとしたら、完全に読み込ませるような方法はあるのでしょうか。よろしくお願いします。
- 締切済み
- JavaScript
- 画像ファイルをアップロードする前に縦横のサイズを取得
ローカルに保存されている任意の画像を選択(input type=fileなどで) すると、テキストボックスにその画像の縦横サイズを表示するといった 事をやりたいのですが、Javascriptで実現可能でしょうか? img.src = "ファイルパス"; img.height; img.width; でサイズ取得は可能ですが、ファイルパスを直書きするのではなく、 あくまで、任意の画像を選択して取得したいです。 わかる方がいらっしゃいましたらご教授いただきたいと思います。 よろしくお願いします。
- 締切済み
- JavaScript
- ASP.NETで画像の高さと幅を取得
ASP.NETでWebページを作成しています。 画像ファイルを読み込んで表示させ、100%、50%・・・ 画像のサイズを拡大縮小させたいと思ってます。 読み込んだ際の画像の高さ幅を元に50%なら1/2と言う 感じで処理できるかなと思っていたのですが、 読み込んだ画像のサイズ(高さ幅)が取得できません。 取得する方法を教えてください。Imageコントロールに そのまま画像URLをセットし表示させてもHeight、Widthが取得できません。 別な方法で画像の表示サイズを変更できるのでしょうか。
- 締切済み
- Microsoft ASP
- ○○.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);//アラートが出ない。
- ベストアンサー
- JavaScript
- 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に関しては表示することができています。 質問内容に過不足等あるかと思いますが、教えていただければ幸いです。
- ベストアンサー
- その他(プログラミング・開発)
補足
ご回答ありがとうございます。 現在、高さを取得する関数自体が上手く作成できずに困っている状態です。 画像読込み完了後のサイズを取得できる関数の作成方法をご存知でしたら、ぜひご教示下さい。 よろしくお願いします。