Xác định kích thước ban đầu của trình duyệt chéo hình ảnh?

Có cách nào đáng tin cậy, độc lập với khung để xác định kích thước vật lý của một <img src='xyz.jpg'>thay đổi kích thước ở phía máy khách không?

Bạn có 2 lựa chọn:

Lựa chọn 1:

Tháo widthvà heightcác thuộc tính và đọc offsetWidthvàoffsetHeight

Lựa chọn 2:

Tạo một Imageđối tượng JavaScript , đặt srcvà đọc widthvà height(bạn thậm chí không cần phải thêm nó vào trang để thực hiện việc này).

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
}

Chỉnh sửa bởi Pekka : Như đã đồng ý trong các ý kiến, tôi đã thay đổi chức năng để chạy trên sự kiện ´onload´ của hình ảnh. Nếu không, với hình ảnh lớn heightvà widthsẽ không trả về bất cứ thứ gì vì hình ảnh chưa được tải.

Hình ảnh (ít nhất là trên Firefox) có thuộc tính a naturalWidth/ height để bạn có thể sử dụng img.naturalWidthđể lấy chiều rộng ban đầu

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

Nguồn

Bạn có thể tải trước hình ảnh vào đối tượng Hình ảnh javascript, sau đó kiểm tra các thuộc tính chiều rộng và chiều cao trên đối tượng đó.

/* 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);

Chỉ cần thay đổi một chút tùy chọn thứ hai của Gabriel, để dễ sử dụng hơn:

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

Cuộc gọi mẫu:

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