我正在寻找一种使用 JavaScript 获取图像高度和宽度的解决方案。我找到了很多，但所有这些解决方案只有在浏览器缓存中存在图像时才有效。

最后我找到了一个即使浏览器缓存中不存在图像也可以获取图像高度和宽度的解决方案：

<script type="text/javascript">

  var imgHeight;
  var imgWidth;

  function findHHandWW() {
    imgHeight = this.height;
    imgWidth = this.width;
    return true;
  }

  function showImage(imgPath) {
    var myImage = new Image();
    myImage.name = imgPath;
    myImage.onload = findHHandWW;
    myImage.src = imgPath;
  }
</script>

谢谢，

比诺·苏曼

http://binodsuman.blogspot.com/2009/06/how-to-get-height-and-widht-of-image.html

试试这个：

var curHeight;
var curWidth;

function getImgSize(imgSrc)
{
var newImg = new Image();
newImg.src = imgSrc;
curHeight = newImg.height;
curWidth = newImg.width;

}

您可以使用img.naturalWidth和img.naturalHeight以像素为单位获得图像的真实尺寸

......但是......在服务器端调整图像大小而不是将字节传输到浏览器并在那里执行不是更好吗？

当我说调整图像大小时，我并不是说在 HTML 图像标签中设置高度和宽度。如果这样做，您仍然会从服务器向客户端传送大量字节。我的意思是，实际上操纵图像本身服务器端。

我在这里有采用这种方法的 .NET C# 代码，但也必须有一种 php 方法来做到这一点：http : //ifdefined.com/www/gallery.html

此外，通过在服务器端进行，可以只进行一次调整，然后保存调整后的图像，这将非常快。

我对此的首选解决方案是在服务器端调整大小，这样您就可以减少不必要的数据传输。

如果您必须在客户端执行此操作，并且需要保持图像比例，则可以使用以下内容：

var image_from_ajax = new Image();
image_from_ajax.src = fetch_image_from_ajax(); // Downloaded via ajax call?

image_from_ajax = rescaleImage(image_from_ajax);

// Rescale the given image to a max of max_height and max_width
function rescaleImage(image_name)
{
    var max_height = 100;
    var max_width = 100;

    var height = image_name.height;
    var width = image_name.width;
    var ratio = height/width;

    // If height or width are too large, they need to be scaled down
    // Multiply height and width by the same value to keep ratio constant
    if(height > max_height)
    {
        ratio = max_height / height;
        height = height * ratio;
        width = width * ratio;
    }

    if(width > max_width)
    {
        ratio = max_width / width;
        height = height * ratio;
        width = width * ratio;
    }

    image_name.width = width;
    image_name.height = height;
    return image_name;
}