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

Question

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

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

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

Answer 1

这比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"));

Answer 2

由于这是Google Chrome扩展程序，因此您不受同一原始政策的约束。

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

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

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

manifest.json（片段）

 ...

 "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.
  }
});

Answer 3

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

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

问题描述

3 个解决方案

解决方案1
5 2010-09-16 08:20:09

解决方案2
5 已采纳 2010-09-23 04:20:58

manifest.json（片段）

popup.html

images.js（内容脚本）

解决方案3
2 2010-09-16 08:11:39

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

问题描述

3 个解决方案

解决方案1 5 2010-09-16 08:20:09

解决方案2 5 已采纳 2010-09-23 04:20:58

manifest.json（片段）

popup.html

images.js（内容脚本）

解决方案3 2 2010-09-16 08:11:39

解决方案1
5 2010-09-16 08:20:09

解决方案2
5 已采纳 2010-09-23 04:20:58

解决方案3
2 2010-09-16 08:11:39