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

Question

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

Answer 1

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

Lựa chọn 1:

Tháo width và height thuộc tính và đọc offsetWidth và offsetHeight

Phương án 2:

Tạo Javascript Image đối tượng, đặt src và đọc width và height (bạn thậm chí không 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 
} 

Sửa bởi Pekka: Theo thỏa thuận trong các ý kiến, tôi đã thay đổi chức năng để chạy trên các sự kiện'onload' của hình ảnh. Nếu không, với hình ảnh lớn, height và width sẽ không trả lại bất kỳ thứ gì vì hình ảnh chưa được tải.

Answer 2

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

Answer 3

hình ảnh (trên Firefox ít nhất) có một tài sản naturalWidth/chiều cao, do đó bạn có thể sử dụng img.naturalWidth để có được 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); 
} 

Source

Answer 4

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

Answer 5

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: gọi

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

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(); 
});