如何跨浏览器检索原始图像尺寸？

跨浏览器检索原始图像尺寸

确定在客户端调整大小的图像的物理尺寸在不同的浏览器中可能是一个挑战。但是，有两个可靠且独立于框架的选项可用：

选项 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 Image 对象，将其 src 属性设置为图像 URL，然后使用宽度和高度属性来检索原始尺寸：

<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>

请注意，在此选项中，图像不必添加到页面以供加载并确定其尺寸。

以上是如何跨浏览器检索原始图像尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！