ansaurus

Question

How do I extract the largest image (by dimension) on a site given the URL?

Answer 1

+2 A:

due to the same origin policy you cant access an external site with javascript. maybe you can write a server-side script that downloads the page (for example using wget), search for img-tags in the html code and load all found images to check the size.

oezi 2010-09-16 08:11:39

Answer 2

+3 A:

This is more web-scaping that JavaScript/jQuery.

However, given that you've recieved the HTML, and that it is available somehow in a JavaScript string, then something like the following might suffice for finding the maximum dimension image:

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

James Wiseman 2010-09-16 08:20:09

Answer 3

+2 A:

Since that is a Google Chrome extension, you are not bound to same origin policy.

Basically, you would need content scripts to fetch all the images within a page, and check each image's size within the DOM to know if its larger the last fetched image.

You can use Message Passing, to communicate from the Content Script to the popup/background page.

For example, I will show you how to get the largest image from a page and show it within the popup. We use all the techniques shown above and you will see the largest image within the popup if you activate it. (should show I believe :))

manifest.json (snippet)

 ...

 "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 (content script)

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

Mohamed Mansour 2010-09-23 04:20:58

ansaurus

tags:

views:

answers:

How do I extract the largest image (by dimension) on a site given the URL?

manifest.json (snippet)

popup.html

images.js (content script)

related questions