首页 >web前端 >js教程 >尽管浏览器调整大小,如何确定原始图像尺寸?

尽管浏览器调整大小,如何确定原始图像尺寸?

Mary-Kate Olsen
Mary-Kate Olsen原创
2024-10-18 18:24:03422浏览

How to Determine Original Image Dimensions Despite Browser Resize?

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

确定已在客户端调整大小的图像的原始尺寸可以是由于浏览器不一致而面临挑战。但是,您可以考虑一些可靠的、独立于框架的选项:

选项 1:删除属性并读取偏移量

从以下位置删除宽度和高度属性图像标签。这允许您读取 offsetWidth 和 offsetHeight 属性来获取图像的实际物理尺寸。

选项 2:创建 JavaScript 图像对象

创建 JavaScript 图像对象并将其 src 属性设置为图像源。然后,读取对象的宽度和高度属性。您无需将图像添加到页面即可使此方法发挥作用。下面是一个示例函数:

<code class="html">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;
}</code>

注意: 正如评论中提到的,在图像的 onload 事件上运行该函数非常重要,以确保图像之前完全加载尝试读取它的尺寸。

以上是尽管浏览器调整大小,如何确定原始图像尺寸?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn