Bagaimanakah Saya Boleh Mendapatkan Dimensi Imej dengan Tepat dalam Penyemak Imbas WebKit?

Mendapatkan semula Dimensi Imej Dengan Tepat dalam Penyemak Imbas Webkit

Mengukur dimensi sebenar imej boleh mencabar dalam penyemak imbas Webkit seperti Safari dan Chrome. Kaedah tradisional seperti mengalih keluar atribut lebar dan ketinggian sebaris serta mengukur dimensi sebenar imej gagal mengambil kira dimensi tetapan penyemak imbas ini selepas imej dimuatkan.

Memanfaatkan Peristiwa Muatan Imej

Daripada bergantung pada tamat masa, pendekatan yang lebih dipercayai ialah menggunakan peristiwa pemuatan imej. Ini membolehkan anda menangkap dimensi apabila imej telah dimuatkan sepenuhnya:

var img = $("img")[0]; // Get my img elem
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;   // Note: $(this).width() will not
        pic_real_height = this.height; // work for in memory images.
    });

Memanfaatkan Atribut NaturalHeight dan NaturalWidth

Pelayar moden menyokong atribut HTML5 naturalHeight dan naturalWidth, yang memberikan dimensi sebenar imej tanpa mengira CSS. Pendekatan ini lebih ringkas:

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

Dengan menggunakan teknik ini, anda boleh mendapatkan semula lebar dan ketinggian sebenar imej dalam pelayar Webkit dengan tepat, membolehkan manipulasi dan paparan imej yang lebih tepat.

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