JavaScript/jQueryで元画像ファイルのサイズの取得方法と対応策

2023/08/10 01:21

このQ&Aのポイント

JavaScript/jQueryを使用して元画像ファイルのサイズを取得する方法について調べています。特定のコードを試してみましたが、コメントアウトすると正確な値が取得できないという不確定な動作があります。この問題に対する対応策を教えてください。
質問者はJavaScript/jQueryを使用して元画像ファイルの幅と高さを取得する方法について詳しく知りたいと思っています。質問者は特定のコードの動作について問題があり、コメントアウトすると正確な値が取得できないという現象が発生しています。この問題に対する対応策を教えてください。
JavaScript/jQueryを使って元画像ファイルのサイズを取得しようとしています。コードを試した結果、コメントアウトすると正確な値が取得できないという問題が発生しています。この問題に対してどのような対応策があるのか教えてください。

ベストアンサー

JavaScript/jQuery で元画像ファイルのサイズの取得

2010/06/30 15:03

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"); の行をコメントとすると、正確な値得られず０となります。　対応の方法をお教えください。

seisuzuki
お礼率33% (3/9)

JavaScript
回答数5
ありがとう数15

みんなの回答 （5）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2010/06/30 19:54 回答No.3

ANo1です。 Imageオブジェクトにonloadイベントを設定できるみたいなので、こんなのでもいけると思います。 $(function() { var newImg = new Image(); newImg.onload = function() { alert("width=" + newImg.width + " height=" + newImg.height); }; newImg.src = 'subf/' + "HighJinks_Ni.jpg"; }); （質問タイトルがjqueryなので、一応使ってますが、必要性はないですね）

その他の回答 (4)

steel_gray
ベストアンサー率66% (1052/1578)

2010/07/01 10:27 回答No.5

コメントだけ。＞#3 Imageオブジェクトにonloadイベントを imgのonloadはキャッシュの関係（というかIEのせい）で残念な事にアテにできないです。 http://www.keyframe.co.jp/blog/archives/418

nekomikekamo
ベストアンサー率73% (71/97)

2010/07/01 09:43 回答No.4

内容としては、No1さんの通りですね。読み込む画像が複数ある場合は、下記を参考にするといいかもしれません。 JavaScript Image Preloader http://www.webreference.com/programming/javascript/gr/column3/

yyr446
ベストアンサー率65% (870/1330)

2010/06/30 17:24 回答No.2

全角空白は半角空白になおしてね <script type="text/javascript"> $(function(){ 　var pW,pH; 　var newimg=newImg(); 　var timer = setInterval(function(){ 　 if(newimg.complete){ 　　 pW=(newimg.width); 　　 pH=(newimg.height); 　　 complete(); 　　 clearInterval(timer); 　 } 　},100); 　function complete(){ 　 alert(pW); 　 alert(pH); 　} }); function newImg() { 　newImg = new Image(); 　newImg.src = 'subf/' + "HighJinks_Ni.jpg"; 　return newImg; } </script>

fujillin
ベストアンサー率61% (1594/2576)

2010/06/30 15:24 回答No.1

＞alert("New Image"); の行をコメントとすると、正確な値得られず０となります画像を読込むのみ多少の時間がかかる場合、読み込み終了前にサイズを取得しようとすればundifinedや0が返ってくると予想できます。（alertを実行させると、それが時間稼ぎになっている）画像の読み込みが終了したかを確認してから、サイズを取得すればよろしいかと。参考の記述は以下に　http://naruken.cweb.tk/labo/java/view4.html

関連するQ&A

画像のサイズが取得できません
Internet Explorer の右クリックメニュー拡張用スクリプトを作っています。画像上で右クリックすると画像のサイズが表示されるようにしたいのですが、うまくいきません。 <script type = "text/javascript"> 　var parentWindow = window.menuArguments; 　var eventSource = parentWindow.event.srcElement; 　var tagName = eventSource.tagName.toUpperCase(); 　var URL; 　if (tagName == "IMG") { 　　URL = eventSource.src; 　　var newImg = new Image(); 　　newImg.src = URL; 　　alert("画像のサイズは " + newImg.width + "×" + newImg.height); 　}; </script> これにより、たとえばこのOKWaveのページの左上にあるロゴは　　画像のサイズは 220 × 54 と表示されますが、たとえば http://goo.gl/I9bEQf では　　画像のサイズは 0 × 0 となってしまいます。なぜでしょうか？原因と解決法を教えていただけると嬉しいです。
- 締切済み
- JavaScript
JQuery のCSVについて
JQuery のCSVについて JQCSV というプラグインを検討していますが、動作が不安定なことが見出されました。状態・対応の方法をお教えください。（IE6.0) <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" src="subf/jQCSV.js"></script> <script type="text/javascript"> var qRec; $(function (){ $.get("camData.csv",function(text){ qRec =$.csv()(text); }); alert("AAA"); alert(qRec[1][0]); $.get("refA.txt",function(text){ alert(text); $('#tell').html(text); }); }); </script> </head> <body> <div id="tell">aaa</div> </body></html> 上のコードで、alert("AAA") をコメント行とすると、alert(qRec[1][0]);　以下が動作しません。これはどのような現象でしょうか。対応法はありますでしょうか。
- 締切済み
- JavaScript
jqueryで画像を切り替えたい
以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test　と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ非同期通信(testのアラート)が表示されました。そこで、 index.htmlファイルの左側にメニューを設けて、メニューをクリックすると、画像のみが切り替わるという内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。　メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると果物画像の入れ替えが行えるでしょうか。ご教授お願いします。
- ベストアンサー
- AJAX
jqueryとjavascriptの競合？
どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> 　<div class="header"></div> 　<div class="main">**フロートで左に配置　　<iframe></iframe> 　</div> 　　//１．　　//jqueryの「iframe-auto-height」プラグインを使って、　　//読み込まれた内容に応じてiframeの高さを変えるようにしたい。　<div class="menu">**フロートで右に配置</div> 　　//２．　　//jqueryの「portamento」プラグインを使って、　　//画面が縦長になりスクロールしてもこの「メニュー」が　　//画面に追従してフロートするように（常に画面上に現れている様に）したい。　　//３．　　//このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■　「１．」「２．」のjqueryは、同時にちゃんと動作しました。　　が、「３．」を加えると「１．」が動きません。　　「２．」は常に正常に動作します。　　「１．」と「３．」が競合しているようなのですが、　　私はみなさんが提供してくださっているスクリプトを“切り貼り”して　　使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、　　希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。　★「３．フロートするメニューボックスの中のリンクから、　　　表示する内容に応じて高さが可変するiframeの内容を切り替える」　　　にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> ///　１．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript">  </script> 　///３．「リンクでiframe内を切り替える」用。 </head> <body> ～～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> 　///　『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。　///　フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際　///　は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> 　///　『autoheight』用スクリプト～～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> 　///　『フロートボックス』用読み込み＆スクリプト　　　　 </body> 内容は以上となります。何卒よろしくお願いいたします。
- 締切済み
- JavaScript
javascriptで別ファイルで変数を取得する。
A.htmlで入力した文字をB.htmlに出るようにしたいのですが、全然出ません。アラートは表示されるのですが、入力欄に何を打っても、　namae と出てしまいます。変数に何も入ってないようです。これを〔javascript〕って入力すれば、アラートに〔javascript〕って出るようにしたいのですが、どうしたらよろしいでしょうか？〔A.html〕 <script type="text/javascript"> var val=namae; window.localStorage.setItem("result", val); </script> <form action="B.htm" id="form1" method="post" onsubmit="check()"> <p>名前<br><input type="text" name="namae" id="buttom" size="28" /></p> <input type="submit" value="送信"/> </form> 〔B.html〕 <script type="text/javascript"> var val = window.localStorage.getItem("result"); alert(val); </script>
- ベストアンサー
- JavaScript
jQueryで画像を表示しようとすると表示しない
textに画像を指定したのですが、そのままタグが表示されてしまい画像が表示されません。色々いじってみたものの表示されなかったりして、どうしたらいいのかわかりません。よろしくお願い致します。 <script type="text/javascript"> jQuery(function(){ var nCnt = 1; var nMax = 6; $.getJSON("./json_sql.php",function(data){ $.each(data,function(i,items){ if(nCnt <= nMax) { $("<li/>",{ text : '<img src="images/test.jpg" width="68" height="14">'+items.category+'　'+items.date+'　'+items.content, 'class' : items.category, }).appendTo('#portfolio'); } nCnt++; }); }); }); </script>
- 締切済み
- JavaScript
javascriptファイルは１つに統合できますか
javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。＜現状＞ <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか？（単純に1箇所にコピー＆ペーストするようなイメージで）お手数ですが、ご教示のほど、宜しくお願い致します。
- ベストアンサー
- JavaScript
QRcode.jsで生成したQRコードを画像で取得
QRcode.jsを使い下記の下記のコードでQRコードを生成することが出来ます。しかし、そのコードをcanvasを使って画像として取得することは可能みたいですが、そのための方法が分かりません。検索してもjqueryを使用したのが多く占めただせさえjavascriptの素人には無理筋です。 <!DOCTYPE html> <html> <body> <div id="qrcode"></div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script> <script type="text/javascript"> var qrcode = new QRCode(document.getElementById("qrcode"), { text: "https://github.com", width: 128, height: 128, colorDark : "#ffffff", colorLight : "#000000", correctLevel : QRCode.CorrectLevel.H }); </script> </body> </html> 最終的には、var image = canvas.toDataURL()の形にして渡したいと思っています。どうかよろしくお願いいたします。
- ベストアンサー
- JavaScript
jQueryで画像にリンクを張りたい
HTMLページに <img src="1.jpg" width="50" height="50" id="tes"> というタグがあるのですが、ページが読み込まれたときに、そのタグにaタグをつけて <a href="hoge.html" target="_blank"><img src="1.jpg" width="50" height="50" id="tes"></a> とリンクを張りたいのですが以下のようなスクリプトを書いてみたのですが、できません。 <script type="text/javascript"> $(function(){ $('<img />').append($('<a />',{ href:"hoge.html", target:"_blank" }) ) }); </script> jQueryがよくわかっていないのでめちゃくちゃなのだと思いますが、そもそもこのように画像にaタグをつけることは可能なのでしょうか。 jQueryのバージョンは1.2.6を使っていますが、新しいバージョンでも構いません。よろしくお願いします。
- ベストアンサー
- JavaScript
google map api プログラミング
javascript google map api　どなたか助けてくださいマップを作成しているのですが、どうしてもわからないところがあります。下のソースコードの中にテーブルがあるのですが、そこに、検索を押したときのマーカーの場所の詳細を表示させたいのですがどうやっても表示できません。どなたかプログラミングにお詳しい方教えてください！よろしくお願いします。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> <meta http-equiv="content-type" content="text/html; charset=UTF-8n"/> 　<title>練習</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&sensor=false&region=jp"></script> <script language="JavaScript" src="gcode_com.js"></script> <script language="JavaScript" src="gcode.js"></script> <script language="JavaScript" src="GoogleMapsCustomMapType.js"></script> <!link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 　<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script> <script type="text/javascript">  </script> </head> <body onload="initialize()" background=""> <center> <font size=5>練習</font> <div id="map_canvas" style="width: 1000px; height: 600px; border: 1px solid Gray;"></div> </center> <div> キーワード: <input id="address" type="textbox" size="30" value="ここにキーワードを入力してください"> <!input id="zm" type="textbox" size=2 value="8n"> <input type="button" value="検索" onclick="codeAddress()"> </div> <table width="400" height="200" border="1" align="left"> <tr> <td width="150" height="50">緯度</td> <td width="150" height="50">経度</td> <td width="800" height="50">住所</td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> <tr> <td width="150" height="25"></td> <td width="150" height="25"></td> <td width="800" height="25"></td> </tr> </table> </body> </html>
- 締切済み
- JavaScript