이미지 크기 가져 오기

Question

이미지 크기를 가져 오는 데 문제가 있습니다. 문서에 이미지를로드하지 않고 이미지의 너비와 높이를 알고 싶습니다. I는 해당 함수를 호출하는 경우

function getImageSize (path) { 
    var image = new Image(); 
    image.name = path; 
    var d = image.onload = function() { 
    var w = this.width; 
    var h = this.height; 
    return {width : w, height : h}; 
    }(); 
    image.src = path; 
    return d; 
} 

, 난 (H, W)를 모두 함유 미정 인덱스 객체를 얻을 다음과 같이 현재 I 코드가있다. 제외 괄호 (8 줄)로 onload 처리기를 호출하지 않으려 고 시도했지만 함수 코드가 무엇인지 얻습니다.

alert(w)을 온로드 처리기 본문에 호출하면 그림 너비는 볼 수 있지만 바깥 쪽은 볼 수 없습니다.

누군가가 문제를 해결하는 방법을 알고 있습니까? 이미지 크기를 얻으려면 어떻게해야합니까?

Answer 1

이 블록

var d = image.onload = function() { 
    var w = this.width; 
    var h = this.height; 
    return {width : w, height : h}; 
}(); 

매우 비린내가 보인다. 이것은 실제로 을 즉시으로 실행하고 {width : w, height : h}을 image.onload 및 d에 할당하고 있습니다. w 및 h은 창의 너비와 높이를 포함하므로 this은 window을 나타 내기 때문에

image.onload에 기능을 할당하고 실행하지 않아야합니다. 함수를 할당해야하는 이유는 이미지를로드하는 데 시간이 걸리고 이미지가로드되면 콜백이 호출되기 때문입니다. 전체 프로세스는 비동기입니다. 그 의미는 또한 수 없습니다getImageSize에서 이미지의 크기를 반환합니다. load 콜백에서 호출해야하는 콜백을 수락해야합니다.

예를 들어

:

function getImageSize (path, callback) { 
    var image = new Image(); 
    image.name = path; 
    image.onload = function() { 
    callback({width : this.width, height : this.height}; 
    } 
    image.src = path; 
}; 

및

getImageSize('path/to/image', function(dim) { 
    // do something with dim.width, dim.height 
}); 

---

와 함수를 호출 동기 및 비동기 코드의 차이에 대해 배울 수 my answer here의 첫 번째 부분에서보세요, 그리고 콜백의 역할.

Answer 2

onload은 비동기 호출이며 호출하는 함수에서 유용한 것을 반환 할 수 없습니다.

전역 변수와 타이머 검사를 사용하여 함수가 완료 될 때까지 기다렸다가 값에 액세스해야합니다.