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

Posted 2023-03-15

【中文标题】确定图像跨浏览器的原始大小？

【英文标题】：Determine original size of image cross browser?

【发布时间】：2010-12-28 23:50:36

【问题描述】：

是否有可靠的、独立于框架的方法来确定在客户端调整大小的<img src='xyz.jpg'> 的物理尺寸？

【问题讨论】：

img.onload = function () console.log(img.height, img.width)

【参考方案1】：

你有两个选择：

选项 1：

删除width和height属性并读取offsetWidth和offsetHeight

选项 2：

创建一个 javascript Image 对象，设置 src，并读取 width 和 height（您甚至不必将其添加到页面中即可执行此操作）。

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

Pekka 编辑：按照 cmets 中的约定，我将函数更改为在图像的“onload”事件上运行。否则，对于大图像，height 和 width 不会返回任何内容，因为图像尚未加载。

【讨论】：

这不适用于尚未加载的图像。可能值得对其进行调整以使其正常工作，以供其他偶然发现此答案的人使用。

@Gabriel，我正在使用它，但有一个newImg.onload 函数来确保在我设置宽度/高度时加载图像。你同意我相应地编辑你的答案吗？

附带说明：Chrome/OSX 可能会出现缓存图像问题，使用此技术将高度/宽度设为 0。

我如何获得返回的高度和宽度...？？因为这些变量没有超出 onload

@GabrielMcAdams，如果您在函数末尾添加 if(newImg.complete || newImg.readyState === 4) newImg.onload();，它将解决 Chrome/OSX 上导致从缓存加载图像时不会触发 onload 的问题。

【参考方案2】：

图像（至少在 Firefox 上）具有 naturalWidth/height 属性，因此您可以使用 img.naturalWidth 获取原始宽度

var img = document.getElementsByTagName("img")[0];
img.onload=function()
    console.log("Width",img.naturalWidth);
    console.log("Height",img.naturalHeight);

Source

【讨论】：

这个话题在 2013 年仍然很重要。下面是一个链接，其中包含 IE7/8 的一个很好的解决方法：jacklmoore.com/notes/naturalwidth-and-naturalheight-in-ie

这是 2018 年的最佳答案。适用于任何地方。 （根据 MDN 的 browser compatibility table。）

【参考方案3】：

您可以将图像预加载到 javascript Image 对象中，然后检查该对象的宽度和高度属性。

【讨论】：

当然——我不必将它放入文档中。会那样做的，干杯！

【参考方案4】：

/* Function to return the DOM object's in crossbrowser style */
function widthCrossBrowser(element) 
    /* element - DOM element */

    /* For FireFox & IE */
    if(     element.width != undefined && element.width != '' && element.width != 0)
        this.width  =   element.width;
    
    /* For FireFox & IE */
    else if(element.clientWidth != undefined && element.clientWidth != '' && element.clientWidth != 0)
        this.width  =   element.clientWidth;
    
    /* For Chrome * FireFox */
    else if(element.naturalWidth != undefined && element.naturalWidth != '' && element.naturalWidth != 0)
        this.width  =   element.naturalWidth;
    
    /* For FireFox & IE */
    else if(element.offsetWidth != undefined && element.offsetWidth != '' && element.offsetWidth != 0)
        this.width  =   element.offsetWidth;
           
        /*
            console.info(' widthWidth width:',      element.width);
            console.info(' clntWidth clientWidth:', element.clientWidth);
            console.info(' natWidth naturalWidth:', element.naturalWidth);
            console.info(' offstWidth offsetWidth:',element.offsetWidth);       
            console.info(' parseInt(this.width):',parseInt(this.width));
        */
    return parseInt(this.width);

   

var elementWidth    = widthCrossBrowser(element);

【讨论】：

element 是 jQuery 选择吗？什么是高度？

【参考方案5】：

只是稍微改变一下Gabriel的第二个选项，更容易使用：

function getImgSize(imgSrc, callback) 
    var newImg = new Image();

    newImg.onload = function () 
        if (callback != undefined)
            callback(width: newImg.width, height: newImg.height)
    

    newImg.src = imgSrc;

html：

<img id="_temp_circlePic" src="http://localhost/myimage.png" 
style="width: 100%; height:100%">

示例调用：

getImgSize($("#_temp_circlePic").attr("src"), function (imgSize) 
    // do what you want with the image's size.
    var ratio = imgSize.height / $("#_temp_circlePic").height();
);