web-dev-qa-db-ja.com

URLからリモート画像の幅と高さを取得します

そのため、アラートは幅と高さの未定義の値を提供します。 img.onload計算からの画像のw値とh値は、返す値に渡されていないか、wとhを返している可能性があると思いますbeforeonloadはそれらを計算します：

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/

javascriptimageheightwidth
60
Wonka

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){   
    var 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

100
Roko C. Buljan

このような引数としてコールバックを渡すだけです：

function getMeta(url, callback) {
    var img = new Image();
    img.src = url;
    img.onload = function() { callback(this.width, this.height); }
}
getMeta(
  "http://snook.ca/files/mootools_83_snookca.png",
  function(width, height) { alert(width + 'px ' + height + 'px') }
);
19
feychu

_img.onload_関数のw変数とh変数は、getMeta()関数の変数と同じスコープ内にありません。それを行う1つの方法は、次のとおりです。

フィドル： http://jsfiddle.net/ppanagi/28UES/2/

_function getMeta(varA, varB) {
    if (typeof varB !== 'undefined') {
       alert(varA + ' width ' + varB + ' height');
    } else {
       var img = new Image();
       img.src = varA;
       img.onload = getMeta(this.width, this.height);
    }
}


getMeta("http://snook.ca/files/mootools_83_snookca.png");
_
10
Panagiotis Panagi

ES6：async/awaitを使用すると、シーケンスのようにgetMeta関数の下で実行でき、次のように使用できます（質問のコードとほぼ同じです（awaitキーワードを追加して変更します変数endをimgに変更し、varをletキーワードに変更します）getMetaによってawaitを実行する必要があるのは、async関数からのみです（実行）。

function getMeta(url) {
    return new Promise((resolve, reject) => {
        let img = new Image();
        img.onload = () => resolve(img);
        img.onerror = reject;
        img.src = url;
    });
}

async function run() {

  let img = await getMeta("http://shijitht.files.wordpress.com/2010/08/github.png");

  let w = img.width;
  let h = img.height; 

  size.innerText = w+' width, '+h+' height';
  size.appendChild(img);
}

run();
<div id="size" />
5
Kamil Kiełczewski