Question

我有一系列sraped图片网址（所以图片仍在删除服务器上）。我想要做的是检查每张图片的尺寸，并在浏览器中加载更大的图片（特定的宽度/高度）。我想在检查尺寸之前我必须首先加载图片，但是如何实现这一点，并非所有图片都显示但只有更大的图片？这甚至可能吗？

Answer 1

假设您的阵列是服务器端并且是PHP

您可以使用php函数getimagesize()获取图像大小，该函数将返回一个数组，其中包含高度和宽度（以及其他一些元信息）。如果高度和宽度符合您的条件，您可以将它们添加到输出数组，您可以将其转换为json并发送回您的jQuery脚本。

假设图像引用在Javascript

中

您必须实际加载图像以确定其尺寸。但它们不一定是可见的。您可以使用$.width()方法检查其宽度，并使用$.height()方法检查它们的高度。如果尺寸表示您的标准，请显示图像。

$(function(){

  var images = ['image1.jpg', 'image2.jpg'];

  $(images).each(function(){
    // Create our Image
    currImage = document.createElement('img');
    // Add it and hide it
    $("body").append( $(currImage).attr('src', this).hide() );
    // Determine whether it should stay
    (currImage.width < 200) ? $(currImage).remove() : $(currImage).show() ;
  });

});

Answer 2

你肯定需要首先加载它们，没有这样做就无法获得宽度/高度。但是，您可以在实际显示之前检查尺寸：

var img = document.createElement('img');
img.onload = function() {
  if (img.width > ... && img.height > ...)
    document.getElementById('some_container').appendChild(img);
  else
    img = null;
};
img.src = 'filename.jpg';
// update as per @Orbling's comment:
if (img.complete)
  img.onload();

Answer 3

另一种可能性是创建新的Image()对象并将其源设置为数组中的每个URL。将onload处理程序附加到图像并查询其大小，然后再决定是否将其注入文档正文。

我不相信你能够在没有从服务器中完整检索所有图像的情况下可靠地执行此操作，但是可能能够执行AJAX HEAD请求以获取图片文件大小 - 假设有问题的服务器做出适当的响应。这样可以过滤出明显太小的图片。

Answer 4

我认为在获取图像后，您可以在它们上面循环并获得每个图像的宽度和高度，然后您可以获得比其他图像更大的图像。

这些问题的答案可能对您有所帮助： Get the real width and height of an image with JavaScript? (in Safari/Chrome)

How to get image size (height & width) using JavaScript?

Answer 5

执行此类操作的最佳方法是使用某种Web服务，您可以查询图像大小（或者可能返回数组，预先排序，使用其图像大小）到javascript。

可以调用放置在image目录中的PHP页面，用于扫描图像，按大小对数组进行排序，然后将数组以JSON，XML或HTML格式返回到JS代码进行显示。

javascript / jquery：根据大小从远程服务器加载图片

5 个答案:

假设您的阵列是服务器端并且是PHP

假设图像引用在Javascript