我需要使用 AJAX 在网页上显示一堆图像。它们都有不同的尺寸，所以我想在显示它们之前调整它们的尺寸。有没有办法在 JavaScript 中做到这一点？
对每个图像使用 PHP 的 getimagesize() 会导致不必要的性能损失，因为会有很多图像。
【问题讨论】：
标签： javascript ajax
我正在寻找使用 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
【讨论】：
myImage.onload = findHHandWW; 应该是myImage.onload = findHHandWW();。编辑不让我补充：字符不够！
myImage.onLoad = findHHandWW; 是对的，它在这里传递对函数的引用，而不是调用它并分配结果。
试试这个：
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;
}
【讨论】：
用 JQuery 试试：
<script type="text/javascript">
function jquery_get_width_height()
{
var imgWidth = $("#img").width();
var imgHeight = $("#img").height();
alert("JQuery -- " + "imgWidth: " + imgWidth + " - imgHeight: " + imgHeight);
}
</script>
或
<script type="text/javascript">
function javascript_get_width_height()
{
var img = document.getElementById('img');
alert("JavaSript -- " + "imgWidth: " + img.width + " - imgHeight: " + img.height);
}
</script>
【讨论】：
您想自己调整图像，还是只调整它们的显示方式？如果是前者，你需要在服务器端做一些事情。如果是后者，你只需要改变 image.height 和 image.width。
【讨论】：
值得注意的是，在 Firefox 3 和 Safari 中，仅通过更改高度和宽度来调整图像大小看起来并不算太糟糕。在其他浏览器中，它看起来很嘈杂，因为它使用最近邻重采样。当然，您需要为提供更大的图像付费，但这可能并不重要。
【讨论】：
只需在隐藏的<img>标签(style = "display none")中加载图片，用jQuery监听load事件触发，用JavaScript新建Image()，将源设置为不可见图片，并获取大小如上。
【讨论】：
嗯...有几种方法可以解释这个问题。
第一种方法，我认为您的意思是简单地更改显示尺寸，以便所有图像显示相同的尺寸。为此，我实际上会使用 CSS 而不是 JavaScript。只需创建一个设置了适当宽度和高度值的类，并让所有<img> 标签都使用该类。
第二种方法是您希望保留所有图像的纵横比，但将显示尺寸缩放到一个合理的值。有一种方法可以在 JavaScript 中访问它，但我需要一些时间来编写一个快速的代码示例。
第三种方法，我希望你不是这个意思，是改变图像的实际大小。这是您必须在服务器端执行的操作，因为 JavaScript 不仅无法创建图像，而且没有任何意义，因为已经发送了完整大小的图像。
【讨论】：