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

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

您有 2 个选择：

选项 1：

删除 and 属性，并读取 和widthheightoffsetWidthoffsetHeight

选项 2：

创建一个 JavaScript 对象，设置 ，然后读取 and（您甚至不必将其添加到页面即可执行此操作）。Imagesrcwidthheight

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 编辑：正如评论中所同意的那样，我将函数更改为在图像的“onload”事件上运行。否则，对于大图像，并且不会返回任何内容，因为图像尚未加载。heightwidth

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

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

源

/* 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);

只是稍微更改了 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();
});

对 Gabriel 的第二个选项进行调整，以帮助使用 react-grid-gallery 的人。

const [images, setImages] = useState([])

const getImgSize = function (imgSrc, index) {
    var newImg = new Image()

    newImg.onload = function () {
        setImages((images) => [
            ...images,
            {
                id: index,
                src: imgSrc,
                thumbnail: imgSrc,
                width: newImg.width,
                height: newImg.height,
            },
        ])
    }

    newImg.src = imgSrc
}

在 useEffect 中，可以调用此方法

gallery_urls?.map((url, index) => {
            getImgSize(url, index)
        })