如何跨浏览器确定原始图像大小？

跨浏览器确定原始图像大小

在 Web 开发中，在客户端调整图像大小是优化页面性能和响应能力的常见做法。然而，由于浏览器不一致，确定调整大小后的图像的原始物理尺寸可能具有挑战性。本文探讨了两种可靠的、独立于框架的选项来获取此信息。

选项 1：使用 OffsetWidth 和 OffsetHeight

此方法涉及删除显式宽度和高度属性来自 元素。随后，您可以访问 offsetWidth 和 offsetHeight 属性来检索调整大小后的图像的实际宽度和高度。这个选项很简单，大多数主流浏览器都支持。

选项 2：使用 JavaScript 图像对象

第二种方法涉及创建 JavaScript 图像对象，设置其 src 属性到图像的源，并访问其宽度和高度属性。请注意，无需将图像添加到页面即可实现此功能。

以下是示例代码片段：

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

    newImg.onload = function() {
      var height = newImg.height;
      var width = newImg.width;
      alert('The image size is ' + width + '*' + height);
    }

    newImg.src = imgSrc; // This must be done after setting onload
}</code>

Pekka 编辑：

为了保证大图的结果准确，可以使用图片的onload事件来触发该函数。否则，在图像加载完成之前，高度和宽度可能不可用。

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