Bagaimana Mendapatkan Dimensi Imej Sebenar dengan Tepat dalam Penyemak Imbas WebKit?

Mendapatkan semula Dimensi Imej Sebenar dalam Penyemak Imbas WebKit

Percubaan untuk menentukan lebar dan ketinggian sebenar imej menggunakan JavaScript dalam penyemak imbas WebKit, seperti Safari atau Chrome, selalunya menghasilkan nilai sifar. Ini kerana WebKit mengemas kini sifat ini hanya selepas imej dimuatkan sepenuhnya.

Untuk mengatasi pengehadan ini, kami mengesyorkan agar anda menggunakan peristiwa pemuatan imej dan bukannya tamat masa. Pendekatan ini membolehkan kami mendapatkan semula dimensi sebenar dengan lebih tepat:

var img = $("img")[0]; // Retrieve the image element
var pic_real_width, pic_real_height;

$("<img/>") // Create an in-memory copy to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width; // Note: $(this).width() won't work for in-memory images.
        pic_real_height = this.height;
    });

Teknik ini memastikan kami mendapatkan semula dimensi imej sebenar tanpa sebarang gangguan daripada penggayaan CSS.

Pilihan lain ialah memanfaatkan HTML5 atribut naturalHeight dan naturalWidth. Atribut ini memberikan dimensi intrinsik dan tidak digayakan bagi imej, tanpa mengira manipulasi CSS:

var pic_real_width = img.naturalWidth;
var pic_real_height = img.naturalHeight;

Dengan melaksanakan kaedah ini, kami boleh mengakses dengan tepat dimensi sebenar imej dalam penyemak imbas WebKit seperti Safari dan Chrome.

Atas ialah kandungan terperinci Bagaimana Mendapatkan Dimensi Imej Sebenar dengan Tepat dalam Penyemak Imbas WebKit?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!