Bagaimana untuk mendapatkan dimensi semula jadi imej menggunakan JavaScript atau jQuery?
P粉916553895
P粉916553895 2023-10-21 13:53:08
0
2
763

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

P粉916553895
P粉916553895

membalas semua(2)
P粉239164234

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

P粉148434742

Anda boleh menggunakan naturalWidthnaturalHeight, 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

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!