JavaScript 이미지 규격 체크 onload 함수

/* imageCheck 함수 */
function imageCheck(){
    var _URL = window.URL || window.webkitURL;
    var img = new Image();
    img.src = _URL.createObjectURL("imgURL");
    
    /* 이미지 가로, 세로 구하는 로직 */
    img.onload = function() {
        var width = img.width;
        var height = img.height;
        if(width > 1000 || height > 1000){
            alert("이미지는 가로, 세로 1000px * 1000px 이하만 업로드 할 수 있습니다.");
            return false;
        }
    }
    
    console.log("함수실행");
}

위의 함수는 이미지를 읽어들여 가로, 세로 1000 이하일때 false 를 주는 함수이다. 

하지만 img.onload 함수는 이미지 로드가 완료되기 전까지 비동기적으로 동작해 이미지 체크 전에

console.log("함수실행"); 부분이 먼저 실행될 수 있다. 

/* imageCheck 함수 동기적 개선 */
function imageCheck(){
    var _URL = window.URL || window.webkitURL;
    var img = new Image();
    img.src = _URL.createObjectURL("imgURL");
    loadImage(img.src)
        .then(function(img) {
            var width = img.width;
            var height = img.height;
            if(width > 1000 || height > 1000){
                alert("이미지는 가로, 세로 1000px * 1000px 이하만 업로드 할 수 있습니다.");
                return false;
            } else {
                    /* 이미지가 가로 * 세로 1000px * 1000px 이하일때 수행로직 */
                }
            }
        )
        .catch(function(error) {
            console.log(error.message);
        });
    }
    
    console.log("함수실행");
}

function loadImage(url) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.onload = function() {
        	resolve(img);
        };
        img.onerror = function() {
        	reject(new Error("이미지 로드 실패"));
        };
        img.src = url;
        // 이미지 미리 로드
    });
}

Promise 객체를 생성한 후에는 then() 메서드를 사용하여 비동기 작업이 성공적으로 완료된 후 수행할 작업을 등록할 수 있습니다.

위 함수로 변경하여 이미지 로드를 동기적 방식으로 진행할 수 있다.