1. ホーム
  2. javascript

[解決済み] 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');

アラートに正しい幅と高さを表示させるにはどうしたらよいですか?

http://jsfiddle.net/YtqXk/

どのように解決するのですか?

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