Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Capture screenshot of browser content (website) [closed]

Tags:

My aim is to have an image of a website (Yes, as simple as that). I know that there are tools like html2canvas. However I don't want the client browser to render the screenshot.

One reason is that I use a chrome extension with a webview which essentially behaves liken an iFrame. For security reasons rendering a screenshot for a website containing an iFrame does not work.

I also know they're working on the capability to natively support capturing website screenshots but I want a cross browser solution and not be dependent on the possibility of the browser. All this happens on a server so it should be executable via command line.

What I'm doing now is:

  1. Open browser via command line
  2. Switch focus to browser window via command line
  3. Make screenshot (screencapture on mac, scrot on Linux) via command line

Doing it at this basic level has the disadvantage of the image containing status bars, browser plugin stuff etc. In fact I only want to have the actual website content without all this application-specific stuff around.

  • The worst solution would be to hard code the 0|0 position of the content relative to the window for every browser. This is shitty (for obvious reasons).
  • Another solution I've come up with is: tell the browser (I can talk to a plugin via socket) to add something like a QR-Code at x:0;y:0;, send the screenshot to the image processing server. After that remove the QR-Code and send the screenshot again. Then I know every point relative to 0|0 but it is also not that elegant.

The best thing would be a command line tool that somehow lets me determine what part of an application I want to capture an image of.

An example is this plugin for Firefox or this server-side tool or all these tools providing screenshots of websites with different browsers and OS like this. I wonder how they get rid of browser-specific GUI elements.

Addition:

I don't know if I made this clear enough, but I want a screenshot of a content of a specific browser but without the browser-specific GUI elements. That means an application running a headless browser will have no use for me. Because the headless browser has its own engine. I specifically want to have a screenshot of e.g. Firefox version x.

like image 228
Schnodderbalken Avatar asked Apr 09 '15 12:04

Schnodderbalken


People also ask

How to take a screenshot of a web page?

You can get a screenshot of not only what you see on the screen but the contents from the whole web page on one single screenshot image. Follow these steps to use the built-in screenshot tool of Firefox: The screenshot tool of Microsoft Edge has two features: area capture and fullscreen capture.

What is the best free web page screenshot service?

Site-Shot: Web page screenshot service, that provides rich interface to make any kind of web screenshots online for free with no limits. In add-on it provides powerful API to automate website screenshot generation.

Are there any web page conversion services that take jpg screenshots?

Our web capture service can take screenshots in perfect JPG format, keeping all websites intact. Are there any online web page conversion services such as Webtopdf that offer such high conversion quality? The simple interface makes it very easy for anyone to screenshot a full page.

How to take a screenshot in Microsoft Edge?

The screenshot tool of Microsoft Edge has two features: area capture and fullscreen capture. Here after you screenshot the page, you can also edit on the spot by using pencil and erasing. Here’s how to use the web capture tool of Microsoft Edge: Open the website you want to capture. Click on Web Capture. Use Shortcut: Ctrl + shift + S


1 Answers

Do you know about Selenium? It's a testing tool that actually opens a specific browser and runs scripted tests. It can be used to take screenshots as well.

This might be a solution to your problem.

like image 154
Ivan Batić Avatar answered Sep 23 '22 21:09

Ivan Batić