客户端跨浏览器调整大小后如何确定原始图像大小？

跨浏览器确定原始图像尺寸

确定已在客户端调整大小的图像的原始物理尺寸可以是跨浏览器挑战。但是，有可靠且独立于框架的方法可以实现此目的：

选项 1：动态图像尺寸读取

从图像 HTML 中删除任何预定义的宽度和高度属性元素。系统将自动调整尺寸以适应显示需要。随后，利用 JavaScript 访问元素的 offsetWidth 和 offsetHeight 属性，它们代表调整后的宽度和高度。

选项 2：JavaScript 图像对象

创建 JavaScript 图像对象并将调整大小的图像的源分配给其 src 属性。加载图像后，对象的宽度和高度属性将保持原始尺寸。您可以利用 onload 事件异步执行此操作，确保在检索尺寸之前图像已完全加载。

代码示例：

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; // Do this after setting `onload`
}

注意：如果您遇到大图像不返回尺寸的问题，请考虑在 JavaScript 对象中使用 onload 事件。这可确保图像在访问其属性之前已完全加载。

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