How do apps that image web pages work?

Question

This isn't really a technical question so I apolgoise if I ruffle any feathers!

How do sites like these image web pages in different browsers? i.e. litmusapp.com

Thanks all

Answer 1

They usually work by having all those applications installed and controllable by the service.

This could for example be done by having many virtual machines in the background, each running the application, and whenever you want to verify the layout the application is started, the content (emails for litmusapp it seems) is rendered, and when it is done a screenshot is taken that you can access on the website.

Another option I have seen: other users on the internet run a small application on their machine and provide their free CPU time to the service. The website finds a user with the application, sends a request to the application on the users machine, and again renders + captures the screen.

Answer 2

This is just a guess but i would think that they have an process that controls a particular set of browsers to navigate to a particular page. The process then takes a screen capture and creates a thumbnail of the result and publishes it.

Answer 3

It's possible that they use some rendering engines from browsers and ask them to render to a canvas that's attached to a raw bitmap, and then just save the bitmap. I expect most of them -- in particular, the ones that specifically say their layout is IE layout, etc. -- just tell the browser to load a page, then find the handle to the browser window, figure out where the internal canvas area is (you can do this with some widget toolkits, and also with some accessibility APIs), and then use normal screenshot techniques to get a bitmap of that area.

Answer 4

I wrote a windows programs that used internet explorer extensions. You can load up a page in memory without showing it in a control and take a snapshot of the rendering buffer and save it as a JPG.

I guess It can be done in other ways!

Answer 5

I've found how-to's on using a custom build of the webkit(safari,chrome,etc) engine to generate PNG screens. Mozilla also has a bitmap buffer than can be copied and converted to PNG. There are addons you can download and view the XUL source code. For a utility, I wold lean toward a command line build of webkit or similar for rendering. It's open source and not terribly hard to do.