Bagaimana untuk Mengambil Dimensi Imej dengan Tepat dalam Penyemak Imbas WebKit (Safari dan Chrome)?

Mendapatkan semula Dimensi Imej Tepat dalam Penyemak Imbas Webkit (Safari, Chrome)

Dalam bidang manipulasi imej Javascript, mendapatkan lebar dan ketinggian sebenar imej boleh menimbulkan cabaran , terutamanya dalam penyemak imbas Webkit seperti Safari dan Chrome.

Isu Gambaran Keseluruhan

Apabila menggunakan jQuery dalam Firefox 3, IE7 dan Opera 9, coretan kod berikut berkesan mengekstrak dimensi imej sebenar:

var pic = $("img");
pic.removeAttr("width");
pic.removeAttr("height");
var pic_real_width = pic.width();
var pic_real_height = pic.height();

Walau bagaimanapun, dalam penyemak imbas Webkit, pendekatan ini menghasilkan yang salah nilai 0.

Penyelesaian: Pemuatan Imej Javascript Peristiwa

Penyelesaian terletak pada mengetik peristiwa onload elemen imej. Kod yang diubah suai di bawah mencapai ini:

var img = $("img")[0]; // Get the image element

$("<img/>") // Make a virtual copy of the image to prevent CSS interference
    .attr("src", $(img).attr("src"))
    .load(function() {
        pic_real_width = this.width;
        pic_real_height = this.height;
    });

Dengan mencipta salinan memori imej dan menggunakan kata kunci ini dalam acara pemuatan, kami memintas sebarang kesan CSS yang berpotensi yang boleh mengubah dimensi imej.

Alternatif: Atribut Imej HTML5

Untuk keserasian dengan penyemak imbas HTML5, anda juga boleh memanfaatkan naturalHeight dan atribut naturalWidth:

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

Atas ialah kandungan terperinci Bagaimana untuk Mengambil Dimensi Imej dengan Tepat dalam Penyemak Imbas WebKit (Safari dan Chrome)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!