차근차근/JAVA Script

[자바스크립트] 이미지 리사이징

예쁜꽃이피었으면 2014. 9. 24. 18:01

검색어 : 자바스크립트 이미지 비율 


http://dochi575.egloos.com/viewer/4306271



function resize(img) {

    // 원본 이미지 사이즈 저장
    var width = img.width;
    var height = img.height;
    
    // 가로, 세로 최대 사이즈 설정
    var maxWidth = 340;
    var maxHeight = 540;
    var resizeWidth;
    var resizeHeight;
    
    // 이미지 비율 구하기
    var basisRatio = maxHeight / maxWidth;
    var imgRatio = height / width;

    if (imgRatio > basisRatio) {
    // height가 기준 비율보다 길다.
        
        if (height > maxHeight) {
            resizeHeight = maxHeight;
            resizeWidth = Math.round((width * resizeHeight) / height);
        } else {
            resizeWidth = width;
            resizeHeight = height;
        }
        
    } else if (imgRatio < basisRatio) {
    // width가 기준 비율보다 길다.
        
        if (width > maxWidth) {
            resizeWidth = maxWidth;
            resizeHeight = Math.round((height * resizeWidth) / width);
        } else {
            resizeWidth = width;
            resizeHeight = height;
        }
        
    } else {
        // 기준 비율과 동일한 경우
        resizeWidth = width;
        resizeHeight = height;
    }
    
    // 리사이즈한 크기로 이미지 크기 다시 지정
    img.width = resizeWidth;
    img.height = resizeHeight;
}





적용해보려고했지만..... 안됨.



var si = document.getElementById("smallimage");

var bi = document.getElementById("bigimage");

    // 원본 이미지 사이즈 저장

    var width = si.style.width;

    var height =si.style.height;

    

    // 가로, 세로 최대 사이즈 설정

    var maxWidth = bi.style.width;

    var maxHeight =bi.style.height;

    var resizeWidth;

    var resizeHeight;

    

    // 이미지 비율 구하기

    var basisRatio = maxHeight / maxWidth;

    var imgRatio = height / width;


    if (imgRatio > basisRatio) {

    // height가 기준 비율보다 길다.

        

        if (height > maxHeight) {

            resizeHeight = maxHeight;

            resizeWidth = Math.round((width * resizeHeight) / height);

        } else {

            resizeWidth = width;

            resizeHeight = height;

        }

        

    } else if (imgRatio < basisRatio) {

    // width가 기준 비율보다 길다.

        

        if (width > maxWidth) {

            resizeWidth = maxWidth;

            resizeHeight = Math.round((height * resizeWidth) / width);

        } else {

            resizeWidth = width;

            resizeHeight = height;

        }

        

    } else {

        // 기준 비율과 동일한 경우

        resizeWidth = width;

        resizeHeight = height;

    }

    

    // 리사이즈한 크기로 이미지 크기 다시 지정

    si.width = resizeWidth;

    si.height = resizeHeight;

반응형