URL에서 원격 이미지의 너비 높이 가져 오기

URL에서 원격 이미지의 너비 높이 가져 오기

---

따라서 경고는 너비와 높이에 대해 정의되지 않은 값을 제공합니다. img.onload 계산에서 이미지의 w 및 h 값이 반환 할 값으로 전달되지 않거나 onload가 계산 하기 전에 w 및 h 를 반환 할 수 있다고 생각 합니다.

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;
}

자바 스크립트로 이미지 크기 가져 오기 (최신 브라우저, 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

---

다음과 같은 인수로 콜백을 전달하십시오.

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') }
);

---

함수 의 w및 h변수는 img.onload함수의 범위와 동일한 범위에 있지 않습니다 getMeta(). 이를 수행하는 한 가지 방법은 다음과 같습니다.

Fiddle: 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");

---

ES6: Using async/await you can do below getMeta function in sequence-like way and you can use it as follows (which is almost identical to code in your question (I add await keyword and change variable end to img, and change var to let keyword). You need to run getMeta by await only from async function (run).

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" />

참고URL : https://stackoverflow.com/questions/11442712/get-width-height-of-remote-image-from-url