跨浏览器揭示客户端调整大小图像的原始尺寸

确定已在客户端调整大小的图像的真实尺寸side 是许多 Web 开发场景的关键任务。无论您是调整图像以实现响应式布局，还是向用户显示原始尺寸，找到一个跨浏览器一致工作的可靠解决方案至关重要。

选项 1：释放 OffsetWidth 和 OffsetHeight

一种方法涉及从 元素中删除宽度和高度属性并检索其 offsetWidth 和 offsetHeight。此技术消除了 CSS 样式覆盖原始尺寸的可能性。

const img = document.querySelector('img');
img.removeAttribute('width');
img.removeAttribute('height');
const width = img.offsetWidth;
const height = img.offsetHeight;

选项 2：利用 JavaScript 图像对象

另一种方法是利用 JavaScript 图像对象。创建一个 Image 对象，将图像源分配给其 src 属性，并在图像加载后直接访问其宽度和高度属性。

const newImg = new Image();
newImg.onload = function() {
  const width = newImg.width;
  const height = newImg.height;
  // Display the dimensions in an alert for demonstration
  alert(`Original image size: ${width}px * ${height}px`);
};
newImg.src = imgSrc; // Important to set after attaching the onload handler

记住要承认事件处理的重要性。对于大图像，使用不带 onload 事件的选项 2 中的方法可能会导致空结果，因为在代码执行运行时图像可能尚未加载。

通过采用这些与浏览器无关的技术，您可以放心地使用确定调整后图像的真实尺寸，从而为您的 Web 应用程序提供更高的精度和灵活性。