Capture screenshot of browser content (website) [closed]

Question

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.

Cherey

That Firefox addon uses the addon-only canvas drawWindow API. Most-likely that site uses a headless browser. I don't think you will find a cross-browser solution, short of computing the offsets for each browser. – Bugeye

But how do I compute those offsets? Is there maybe a reliable way to find the upper left with image processing capabilities? – Cherey

this is firefox gcli commands screenshot. dxr.mozilla.org/mozilla-central/source/toolkit/devtools/gcli/…, add-ons use it. – Pampero

In chrome should see developer.chrome.com/extensions/samples#search:screenshot with tabs permissions developer.chrome.com/extensions/tabs preset. – Pampero

do you want full-page screenshot even when scrollable items are not visible in current browser-frame? Or a screenshot of the viewable area would suffice?? – Charissacharisse

The optimal case would be the full page. I could handle that since I can talk with the browser via socket and tell it to capture then scroll then capture then scroll etc and put together the image on the server.. It's not that I fear to have too little relevant stuff on the image but rather too much! (UI elements) – Cherey

If a command-line tool is okay, what languages would you need? You currently have this tagged with javascript. – Enroll

Can't you just toggle the browser's fullscreen-mode and capture the whole screen? – Wallen

How do I toggle fullscreen mode from the outside? I don't think every browser supports a parameter on every OS causing the browser to start in full screen.. :/ – Cherey

@Cherey However, every browser has a key to full-screen the browser, namely F11 on windows. You could send a keystroke to the process programmatically rather easily. – Garment

Is this just for development, or are you trying to create a screenshot service/tool? This could affect which answers are valid (some being more hacked together than others). – Meek

Answer 1

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.

Humidity

Okay, good suggestion. It's even possible to start a specific browser version:#16999003 . Do you know how this is done? Is the content rendered in JavaScript? Is the whole being captured (scrolling down)? Is it possible to capture websites with external elements like iframes? I will definitely have a look at this. Thank you! – Cherey

I don't know the internals, but I can take a look and try. What is your ideal behaviour? – Zaslow

Answer 2

Awesomescreenshot will actually scroll down the page taking actual screenshots, then put those images together into one long image for you. You can even set it to only capture the part of the page that's showing, or a selected section.

You could mix this with a macro type program/scripting language like Auto Hot Keys. You may or may not find it easier than using command line. I suppose it depends on what you're trying to do.

Macias

I hadn't heard of this extension before. It sounds very promising. Also, it is available for both firefox and chrome. What bugs me about this is that the screenshot is still captured on the client side (using javascript). Can I really be sure that 1. It will render iframes properly (I need this because I use a webview) 2. It looks 100% (and I mean 100%) like the rendered page because I might want to do a pixel-by-pixel comparison afterwards – Cherey

I can't say for certain. Couldn't find people talking about it or documentation regarding that bit. I tested on simple iframe sites and it seems okay, and pixel-by-pixel compares seem like they would work as well. Not sure about webviews. The fastest way to find out if it works for you is probably to just test it on your particular project. – Macias

Answer 3

Most server-side languages just serve the HTML and never render it. Awhile back I ran into the issue of indexing single page javascript applications and one of the solutions was phantomJS.

PhantomJS does exactly what you want. You can render the HTML (serve-side) and Phantom also has canvas built in so you can screenshot it using that. Phantom is webkit so it will cover most of the popular browsers (Chrome, Safari, Opera). If you want to see what the website will look like on Firefox you can try SlimerJS (similar to PhantomJs but runs the Gecko engine).

This would cover all the most popular browsers (except IE). This is still a headless solution, but you would be able to see different layout engines. You will need NodeJS and it may be a little learning, but they both have documentation on screenshots. Good luck!

• http://phantomjs.org/screen-capture.html
• http://docs.slimerjs.org/current/quick-start.html#taking-screenshots

Meek

Quoting my last paragraph: "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." If I used a headless browser like PhantomJS I could never be sure it would look the same in browser x version y however that's exactly what I want. – Cherey

My bad. You could try mixing PhantomJS with SlimerJS (slimerjs.org) to cover Webkit and Gecko. This would cover all the most popular browsers. This is still a headless solution, but you would be able to see different layout engines. If you are trying to see specific browser versions I am afraid I can not help you there. Bottom line this sounds like a hard issue so if you can not find another solution you can try this. – Meek

Okay, thank you anyways :). Yes, this would be some kind of solution. However if I don't want to change something and wait for the respective headless browser implementation every time a new browser engine becomes popular and if I want to be sure that the image is 100% the same within the actual browser this is not the best way to go :( – Cherey

I understand. Sorry, this is the best thing I can think of. If you are just trying to do this for Development this is a great tool I have used - vanamco.com/ghostlab. I do not think it does screenshots but it gives you a live preview of a website on any browser and as many as you want at once. – Meek

Answer 4

There are 2 ways to do it:

1. Create a plugin for Firefox or Chrome

The screenshot is taken by creating a canvas overlay over the page. The image is taken from the document, so the browser UI is not part of the image.

2. Re-create a browser (PhantomJS, TrifleJS)

There is no browser UI in the first place.

Medusa

1.) "However I don't want the client browser to render the screenshot." 2.) "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." I would have to create a headless browser for basically every engine and then it would lack the functionality to have different results on different versions of the same browsers.. – Cherey

Answer 5

There are various tools open source as well as paid to do the same. But, keeping security reasons in mind. I will suggest you to use 'Save to Drive' extension by Google itself.

This will provide you a more secure way to save screenshots directly to your google drive and along with screenshots it also allows users to save pictures or other documents to the google drive.

// Second Suggestion //

If you don't wish to use the above extension then you can use 'Blipshot' , it is an open source tool, also available on GitHub.

// Third Suggestion //

The third best solution is Full Page Screen Capture .

This three tools are few of the best rated screenshot tools for Google Chrome as well as other browser.

I hope it helps you!

Gilbart

Answer 6

Many combinations of browser, version and os platform

To capture screenshots of webpages with specific browser and version requires a framework that can launch, run and capture in all these browsers, Further the question didn't specify if it is also required for specific platforms in combination with said browsers and versions, like on OSX, Windows, Linux, Android etc. different versions of these platforms will further increase the possible combinations.

• You would need to setup, maintain these browsers
• Find or create a framework to drive them, Selenium probably your best bet
• Overcome lack of support in Selenium for certain browser/OS combinations
• An infrastructure that manage this and exposes as in a nice API for use

There are however existing solution, or related solution for this, for instance:

As for getting screenshots captures in specific browser, version, platform etc.

http://browsershots.org/ is free and has a large set of browser combos, not very clear if you can access it programmatically though.

Getting this done simply calling and existing API

crossbrowsertesting.com is a commercial service (free trial) that appears to satisfy all of the requirements.

Has the technology that can do this

http://usersnap.com supports a lot of browsers, both desktop and mobile and has done a lot of work to get pixel perfect screenshot on servers, being identical to what user would see in their environment.

Engineers focus on solution as requirement...

As is so typical for us engineering types, we get stuck in how to implement a specific solution. It is not clear by the question what problem getting these screenshots will solve, i.e. the underlying requirement. If that was known maybe there are other simpler approaches available?

Roughneck

Answer 7

I have had some luck in the past with XULRunner

You can try the routine outlined here: https://blog.builtwith.com/2010/07/02/mozilla-automated-website-screen-grabber/

which basically runs a shell of Firefox and automates the process of grabbing screenshots. It may need some tweaking, but I think it could meet your requirements as written.

Clemente

In general, that's quite good! It serves the needs I have. The only problem about it is that I am stuck to firefox with this solution. However, like I said above:"I want a cross browser solution and not be dependent on the possibility of the browser.". Because my aim is to compare the different renderings of certain browsers. Thank you anyways :) – Cherey