如何跨瀏覽器檢索原始影像尺寸？

跨瀏覽器擷取原始影像尺寸

確定在客戶端調整大小的影像的實體尺寸在不同的瀏覽器中可能是一個挑戰。但是，有兩個可靠且獨立於框架的選項可用：

選項1：使用offsetWidth 和offsetHeight

從圖像元素中刪除寬度和高度屬性(< ;img> 標籤）。然後，使用offsetWidth 和offsetHeight 屬性來擷取調整大小後的影像的真實寬度和高度：

<code class="javascript">const img = document.querySelector('img');

img.removeAttribute('width');
img.removeAttribute('height');

const width = img.offsetWidth;
const height = img.offsetHeight;</code>

選項2：使用JavaScript 影像物件

建立一個一個一個有JavaScript 影像物件

<code class="javascript">function getImgSize(imgSrc) {
    const newImg = new Image();

    newImg.onload = function() {
        const width = newImg.width;
        const height = newImg.height;

        // Do something with the dimensions...
    };

    newImg.src = imgSrc;
}</code>

建立一個一個一個有JavaScript 影像物件

建立一個一個「JavaScript 影像物件建立一個「新的JavaScript Image 對象，將其src 屬性設為圖像URL，然後使用寬度和高度屬性來檢索原始尺寸：請注意，在此選項中，圖像不必添加到頁面以供加載並確定其尺寸。

以上是如何跨瀏覽器檢索原始影像尺寸？的詳細內容。更多資訊請關注PHP中文網其他相關文章！