Question

我需要使用AJAX在网页上显示一堆图像。所有这些都有不同的尺寸，所以我想在显示它们之前调整它们的尺寸。有没有办法在JavaScript中执行此操作？

对每张图片使用PHP的getimagesize()会导致不必要的性能损失，因为会有很多图像。

Answer 1

我正在寻找一种解决方案，使用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>

谢谢，

Binod Suman

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

Answer 2

试试这个：

var curHeight;
var curWidth;

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

}

Answer 3

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

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

我在这里使用.NET C＃代码采用这种方法，但必须有一种php方式来实现它：http://ifdefined.com/www/gallery.html

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

Answer 4

我首选的解决方案是调整服务器端的大小，以便传输较少的不必要数据。

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

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;
}

Answer 5

尝试使用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>

Answer 6

您可以使用img.naturalWidth和img.naturalHeight来获取图像的实际尺寸（以像素为单位）

Answer 7

您想要自己调整图像，还是只调整它们的显示方式？如果是前者，你需要服务器端的东西。如果是后者，你只需要改变image.height和image.width。

Answer 8

嗯......有几种方法可以解释这个问题。

第一种方式和我认为你的意思是简单地改变显示尺寸，使所有图像显示相同的尺寸。为此，我实际上使用CSS而不是JavaScript。只需创建一个设置了适当宽度和高度值的类，并使所有<img>标签都使用此类。

第二种方法是您希望保留所有图像的纵横比，但将显示尺寸缩放为合理的值。有一种方法可以在JavaScript中访问它，但我需要一点来编写快速代码示例。

第三种方式，我希望你的意思不是这样，是改变图像的实际大小。这是你必须在服务器端做的事情，因为JavaScript不能创建图像，但它没有任何意义，因为已经发送了完整大小的图像。

Answer 9

值得注意的是，在Firefox 3和Safari中，仅通过更改高度和宽度来调整图像大小看起来并不太糟糕。在其他浏览器中，它看起来非常嘈杂，因为它使用的是最近邻重采样。当然，你付钱购买更大的图像，但这可能并不重要。

Answer 10

只需将图片加载到隐藏的<img>标记（style = "display none"）中，使用jQuery监听加载事件，使用JavaScript创建新的Image()，将源设置为隐藏图像，并获得如上所述的大小。

Javascript - 获取图像高度

10 个答案: