Javascript – 获取图片高度
我需要使用AJAX在网页上显示一堆图片。 他们都有不同的尺寸，所以我想调整他们的大小，然后再显示它们。 有什么办法可以在JavaScript中做到这一点？
使用PHP的getimagesize()为每个图像导致不必要的性能打击，因为会有很多图像。
我正在寻找一个解决scheme来获得使用JavaScript的图像的高度和宽度。 我发现很多，但所有这些解决scheme只有当图像存在于浏览器caching中时才起作用。
最后，我发现了一个解决scheme来获取图像的高度和宽度，即使图像不存在于浏览器caching中：
<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>
谢谢，
Binod Suman
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; }
…但是…调整服务器端的图像大小不是更好，而不是传输字节到浏览器，并在那里做？
当我说调整图像大小时，我并不是说在HTML图像标记中设置高度和宽度。 如果你这样做，你仍然在从服务器传送大量的字节到客户端。 我的意思是，实际上操纵图像本身的服务器端。
我有.NET C＃代码在这里采取的方法，但也必须有一个PHP的方式来做到这一点： http : //ifdefined.com/www/gallery.html
另外，通过在服务器端进行操作，可以调整一次，然后保存调整后的图像，速度非常快。
我的首选解决scheme是做服务器端resize，所以你正在传输更less的不必要的数据。
如果你不得不在客户端做，而且需要保持图像比例，你可以使用下面的方法：
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创build一个新的Image() ，将源设置为不可见的图像，像上面一样。
那么…有几种方法来解释这个问题。
第一种方法和我认为你的意思是简单地改变显示尺寸，使所有图像显示相同的大小。 为此，我实际上使用CSS而不是JavaScript。 只需创build一个具有适当宽度和高度值的类，并使所有<img>标签使用此类。
第二种方法是，您要保留所有图像的纵横比，但将显示尺寸缩放到一个合理的值。 有一种方法可以在JavaScript中访问这个，但是我需要一点来写一个快速的代码示例。
第三种方法，我希望你不是这个意思，就是改变图像的实际尺寸。 这是你在服务器端必须做的事情，因为JavaScript不能创build图像，但是没有任何意义，因为全尺寸图像已经被发送。
