Làm cách nào để có được kích thước tự nhiên của hình ảnh bằng javascript hoặc jquery?

Question

tôi có mã này cho đến nay:

var img = document.getElementById('draggable'); 
var width = img.clientWidth; 
var height = img.clientHeight; 

Tuy nhiên điều này được tôi html thuộc tính - phong cách css. Tôi muốn lấy kích thước của tài nguyên hình ảnh thực tế, của tệp.

Tôi cần điều này vì khi tải lên một hình ảnh, chiều rộng của nó được đặt thành 0px và tôi không biết tại sao hoặc nơi điều này xảy ra. Để ngăn chặn nó tôi muốn có được kích thước thực tế và thiết lập lại chúng. Điều này có thể không?

Chỉnh sửa: Ngay cả khi tôi cố gắng để có được naturalWidth tôi nhận được 0 kết quả là. Tôi đã thêm một hình ảnh. Điều kỳ lạ là nó chỉ xảy ra khi tôi tải lên các tập tin mới và sau khi làm mới nó làm việc như nó cần.

http://oi39.tinypic.com/3582xq9.jpg

Answer 1

Bạn có thể sử dụng naturalWidth và naturalHeight, các đặc tính này chứa thực tế, không đổi chiều rộng và chiều cao của hình ảnh, nhưng bạn phải đợi cho đến khi hình ảnh đã nạp để có được chúng

var img = document.getElementById('draggable'); 

img.onload = function() { 
    var width = img.naturalWidth; 
    var height = img.naturalHeight; 
} 

này chỉ là được hỗ trợ từ IE9 trở lên, nếu bạn phải hỗ trợ trình duyệt cũ hơn, bạn có thể tạo hình ảnh mới, đặt nguồn thành hình ảnh tương tự và nếu bạn không sửa đổi kích thước của hình ảnh, nó sẽ trả về kích thước hình ảnh tự nhiên, đó sẽ là mặc định khi không có kích thước nào khác được cung cấp

var img  = document.getElementById('draggable'), 
    new_img = new Image(); 

new_img.onload = function() { 
    var width = this.width, 
     heigth = this.height; 
} 

new_img.src = img.src; 

FIDDLE

Answer 2

Có img.naturalHeight và img.naturalWidth mà cung cấp cho bạn chiều rộng và chiều cao của hình ảnh bản thân, và không phải là phần tử DOM.

Answer 3

Bạn có thể sử dụng chức năng sau mà tôi đã thực hiện.

Chức năng

function getImageDimentions(imageNode) { 
    var source = imageNode.src; 
    var imgClone = document.createElement("img"); 
    imgClone.src = source; 
    return {width: imgClone.width, height: imgClone.height} 
} 

html:

<img id="myimage" src="foo.png"> 

sử dụng nó như

var image = document.getElementById("myimage"); // get the image element 
var dimentions = getImageDimentions(image); // get the dimentions 
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions