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

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

javascript jquery google-chrome google-chrome-extension

Javascript 如何在给定URL的站点上提取最大的图像（按维度）？,javascript,jquery,google-chrome,google-chrome-extension,Javascript,Jquery,Google Chrome,Google Chrome Extension,例如，如果我输入：它将返回：使用javascript/jquery。这些站点都是外部站点。谢谢大家! 由于使用javascript，您无法访问外部站点。也许您可以编写一个服务器端脚本来下载页面（例如使用wget），在html代码中搜索img标记并加载所有找到的图像以检查大小。这比JavaScript/jQuery更像是网页抓取但是，假设您已经收到HTML，并且它以JavaScript字符串的形式存在，那么下面的内容就足以找到最大维度的图像： var sHTML = getHTMLSom

例如，如果我输入：

它将返回：

使用javascript/jquery。这些站点都是外部站点。谢谢大家!

由于使用javascript，您无法访问外部站点。也许您可以编写一个服务器端脚本来下载页面（例如使用

wget

），在html代码中搜索img标记并加载所有找到的图像以检查大小。

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

由于这是一个谷歌浏览器的扩展，您不必遵守同一原产地政策

基本上，您需要获取页面中的所有图像，并在DOM中检查每个图像的大小，以了解其是否比上次获取的图像大

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

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

manifest.json（代码段） popup.html

您不久前在这里问了完全相同的问题：-为什么再次问？虽然这是一个旧答案，但您可以使用

document.images

而不是

document.getElementsByTagName（'img'）

：）

 ...

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

...

<!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>

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