[javascript] 이미지 크로스 브라우저의 원래 크기를 결정 하시겠습니까?

Program / 글쓴이

<img src='xyz.jpg'>클라이언트 측 에서 크기 조정 의 물리적 크기를 결정하는 안정적이고 프레임 워크 독립적 인 방법이 있습니까?

답변

두 가지 옵션이 있습니다.

옵션 1:

제거 width및 height속성을 읽기 offsetWidth및offsetHeight

옵션 2 :

자바 스크립트 작성 Image객체의 설정 src및 읽기 width와 height(당신도 이렇게 페이지에 추가 할 필요가 없습니다).

function getImgSize(imgSrc) {
    var newImg = new Image();

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert ('The image size is '+width+'*'+height);
    }

    newImg.src = imgSrc; // this must be done AFTER setting onload
}

Edit by Pekka : 의견에서 동의 한대로 이미지의 “onload”이벤트에서 실행되도록 기능을 변경했습니다. 그렇지 않으면 큰 이미지가 height있고 width이미지가 아직로드되지 않았기 때문에 아무것도 반환하지 않습니다.

답변

이미지 (적어도 Firefox에서는)에 naturalWidth/ height 속성이 있으므로 img.naturalWidth원래 너비를 얻는 데 사용할 수 있습니다.

var img = document.getElementsByTagName("img")[0];
img.onload=function(){
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);
}

출처

답변

이미지를 자바 스크립트 이미지 개체에 미리로드 한 다음 해당 개체의 너비 및 높이 속성을 확인할 수 있습니다.

답변

/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) {
    /* element - DOM element */

    /* For FireFox & IE */
    if(     element.width != undefined && element.width != '' && element.width != 0){
        this.width  =   element.width;
    }
    /* For FireFox & IE */
    else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0){
        this.width  =   element.clientWidth;
    }
    /* For Chrome * FireFox */
    else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0){
        this.width  =   element.naturalWidth;
    }
    /* For FireFox & IE */
    else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0){
        this.width  =   element.offsetWidth;
    }
        /*
            console.info(' widthWidth width:',      element.width);
            console.info(' clntWidth clientWidth:', element.clientWidth);
            console.info(' natWidth naturalWidth:', element.naturalWidth);
            console.info(' offstWidth offsetWidth:',element.offsetWidth);
            console.info(' parseInt(this.width):',parseInt(this.width));
        */
    return parseInt(this.width);

}

var elementWidth    = widthCrossBrowser(element);

답변

사용하기 쉽도록 Gabriel의 두 번째 옵션을 약간 변경하십시오.

function getImgSize(imgSrc, callback) {
    var newImg = new Image();

    newImg.onload = function () {
        if (callback != undefined)
            callback({width: newImg.width, height: newImg.height})
    }

    newImg.src = imgSrc;
}

HTML :

<img id="_temp_circlePic" src="http://localhost/myimage.png"
style="width: 100%; height:100%">

샘플 호출 :

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) {
    // do what you want with the image's size.
    var ratio = imgSize.height / $("#_temp_circlePic").height();
});

답변