如何在给定 URL 的站点上提取最大的图像（按维度）？答案

【问题标题】：How do I extract the largest image (by dimension) on a site given the URL?如何在给定 URL 的站点上提取最大的图像（按维度）？
【发布时间】：2010-09-16 07:55:57
【问题描述】：

例如，如果我输入： http://www.google.com/

它会返回： http://www.google.com/images/logos/ps_logo2.png

使用 javascript/jquery。这些站点都将是外部的。谢谢！

【问题讨论】：

您前段时间在这里问过完全相同的问题：stackoverflow.com/questions/3615983/… - 为什么又是这样？

标签： javascript jquery google-chrome google-chrome-extension

【解决方案1】：

由于这是 Google Chrome 扩展程序，因此您不受同源策略的约束。

基本上，您需要content scripts 来获取页面中的所有图像，并检查 DOM 中每个图像的大小，以了解最后获取的图像是否更大。

您可以使用Message Passing，从内容脚本与弹出/背景页面进行通信。

例如，我将向您展示如何从页面中获取最大的图像并将其显示在弹出窗口中。我们使用上面显示的所有技术，如果您激活它，您将在弹出窗口中看到最大的图像。（应该表明我相信:)）

manifest.json (sn-p)

 ...

 "permissions": [
   "tabs",
   "http://*/*"
 ],
  "content_scripts": [
  {
    "matches": ["http://*/*"],
    "js": ["images.js"],
    "run_at": "document_start",
    "all_frames": true
  }
 ]

...

popup.html

<!DOCTYPE html> 
<html>
<head>
<script>
function getImage() {
  chrome.tabs.getSelected(null, function(tab) {
    chrome.tabs.sendRequest(tab.id, {method: "getImage"}, function (response) {
      var text = document.getElementById('image'); 
      var image = response.data;
      text.src = image ? response.data : 'no_image.gif';
    });
  });
}
</script>
</head>
<body>
<button onclick="getImage(); ">Get Largest Image</button>
<img src="no_image.gif" id="image"/>
</body>
</html>

images.js（内容脚本）

function getMaxImage() {
  var maxDimension = 0;
  var maxImage = null;

  // Iterate through all the images.
  var imgElements = document.getElementsByTagName('img');
  for (var index in imgElements) {
    var img = imgElements[index];
    var currDimension = img.width * img.height;
    if (currDimension  > maxDimension){
       maxDimension = currDimension
       maxImage = img;
    }
  }
  // Check if an image has been found.
  if (maxImage) 
    return maxImage.src;
  else
    return null;
}

// Listen for extension requests.
chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == "getImage") {
    sendResponse({data: getMaxImage()});
  } else {
    sendResponse({}); // snub them.
  }
});

【讨论】：

虽然这是一个旧答案，但您可以使用 document.images 而不是 document.getElementsByTagName('img') :)

【解决方案2】：

这比 JavaScript/jQuery 更具网络抓取能力。

但是，假设您已收到 HTML，并且它以某种方式在 JavaScript 字符串中可用，那么类似以下的内容可能足以找到最大尺寸的图像：

var sHTML = getHTMLSomehow(sURL);
var nMaxDim = 0;
var $pageDOM = $(sHTML);
var $objMaxDimImage;

$pageDOM.("img").each(function(){
    var $this = $(this);
    var nDim = parseFloat($this.width()) * parseFloat($(this).height());
    if (nDim > nMaxDim){
        $objMaxDimImage = $this;
        nMaxDim = nDim
    }
});

alert("Max dim is:" nMaxDim);
alert("Image Source:" $objMaxDimImage.attr("src"));

【讨论】：

【解决方案3】：

由于same origin policy，您无法使用 javascript 访问外部站点。也许您可以编写一个下载页面的服务器端脚本（例如使用wget），在 html 代码中搜索 img-tags 并加载所有找到的图像以检查大小。

【讨论】：