[解決済み] URL からリモート画像の幅と高さを取得する
2023-07-12 17:17:42
質問
アラートでwidthとheightが未定義の値になってしまうんですね。img.onloadの計算で出た画像のwとhの値が返す値に渡されていないのか、wとhを返しているような気がします の前に がonloadで計算しているのかもしれません。
function getMeta(url){
var w; var h;
var img=new Image;
img.src=url;
img.onload=function(){w=this.width; h=this.height;};
return {w:w,h:h}
}
// "http://snook.ca/files/mootools_83_snookca.png" //1024x678
// "http://shijitht.files.wordpress.com/2010/08/github.png" //128x128
var end = getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");
var w = end.w;
var h = end.h;
alert(w+'width'+h+'height');
アラートに正しい幅と高さを表示させるにはどうしたらよいですか?
どのように解決するのですか?
jQueryで画像サイズを取得する
function getMeta(url) {
$("<img/>",{
load: function() {
alert( this.width +" "+ this.height );
},
src: url
});
}
JavaScriptで画像サイズを取得する
function getMeta(url) {
var img = new Image();
img.onload = function() {
alert( this.width +" "+ this.height );
};
img.src = url;
}
JavaScriptで画像サイズを取得する (モダンブラウザ, IE9+ )
function getMeta(url){
const img = new Image();
img.addEventListener("load", function() {
alert( this.naturalWidth +' '+ this.naturalHeight );
});
img.src = url;
}
のように使う。
getMeta( "http://example.com/img.jpg" );
https://developer.mozilla.org/en/docs/Web/API/HTMLImageElement
関連
-
[解決済み] 幅・高さをピクセル単位からパーセント単位で設定する。
-
[解決済み] JavaScriptで現在のURLを取得する?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQuery ドロップダウンから選択されたオプションを取得する
-
[解決済み] HTML要素の実際の幅と高さを取得するにはどうすればよいですか?
-
[解決済み】「GET」パラメータから値を取得する(JavaScript)【重複】。
-
[解決済み】android.widget.ImageViewの幅と高さを取得する方法とは?
-
[解決済み] オブジェクトの配列からReactコンポーネントをレンダリングする
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] JSのDateからDay名
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] JSXとLoadshを使用して、ある要素をn回繰り返す方法
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] Node.jsのES6クラスをrequireで作る
-
[解決済み] なぜjavascriptのES6 Promisesはresolve後も実行を継続するのですか?
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?
-
[解決済み] JavaScriptデータフォーマット/プリティプリンタ