Geek Answers Handbook

How to extract the largest image (in size) to the site based on the URL?

For example, if I enter: http://www.google.com/

He will be back: http://www.google.com/images/logos/ps_logo2.png

Using javascript / jquery. These sites will be external. Thanks!

+6
javascript jquery google-chrome google-chrome-extension
source share
3 answers

Since this is a Google Chrome extension, you are not associated with the same origin policy.

Basically, you will need content scripts to get all the images on the page and check each image size in the DOM to see if it is larger - the last image extracted.

You can use Message Passing to communicate with Script Content on a pop-up / background page.

For example, I will show you how to get the largest image from a page and show it in a popup window. We use all the methods shown above, and you will see the largest image in the pop-up window if you activate it. (must show that I believe :))

manifest.json (fragment)

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

 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. } });
+4
source share

These are more web clips than JavaScript / jQuery.

However, given the assumption that you received the HTML code, and that it is somehow available in the JavaScript string, the following type may be sufficient to find the maximum dimensional 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"));
+5
source share

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

+2
source share

More articles:


All Articles