Bagaimana untuk mendapatkan dimensi semula jadi imej menggunakan JavaScript atau jQuery?

Question

Setakat ini saya mempunyai kod ini:

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

Walau bagaimanapun, ini memberi saya atribut html - gaya css. Saya ingin mendapatkan dimensi sumber imej sebenar fail.

Saya memerlukan ini kerana selepas memuat naik imej, lebarnya ditetapkan kepada 0px dan saya tidak tahu mengapa atau di mana ini berlaku. Untuk mengelakkan ini, saya ingin mendapatkan dimensi sebenar dan menetapkannya semula. adakah mungkin?

EDIT: Walaupun saya cuba mendapatkan NaturalWidth, hasilnya adalah 0. Saya menambah gambar. Perkara yang pelik ialah ini hanya berlaku apabila saya memuat naik fail baharu dan selepas muat semula ia berfungsi dengan baik.

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

Answer 1

Ada img.naturalHeight 和 img.naturalWidth memberi anda lebar dan ketinggian imej itu sendiri, bukan elemen DOM.

Answer 2

Anda boleh menggunakan naturalWidth和naturalHeight, sifat ini mengandungi lebar dan ketinggian imej sebenar, tidak diubah suai, tetapi anda perlu menunggu sehingga imej dimuatkan untuk mendapatkannya

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

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

Ciri ini hanya menyokong IE9 dan ke atas, jika anda mesti menyokong pelayar lama, anda boleh mencipta imej baharu, tetapkan sumbernya kepada imej yang sama, jika saiz imej tidak diubah suai, ia akan mengembalikan saiz semula jadi imej , kerana Ini akan menjadi saiz lalai apabila tiada saiz lain diberikan

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