如何在不同浏览器中准确测量调整大小后的图片的原始尺寸？

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

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

选项 1：释放 OffsetWidth 和 OffsetHeight

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

<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 属性，并在图像加载后直接访问其宽度和高度属性。

<code class="javascript">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</code>

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

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

以上是如何在不同浏览器中准确测量调整大小后的图片的原始尺寸？的详细内容。更多信息请关注PHP中文网其他相关文章！