This page explores different approaches to being able to show screenshots of arbitrary URLS in a browser based UI. There are a few different techniques that can be used here, both client, and server-side, so this page intends to examine performance, browser support, ease of implementation etc for a larger project I am working on.


Technique 1 - Iframes with scaled content

This approach is 100% client-side, using IFRAME elements to load the given URL, then using CSS to scale the loaded content. This approach is interesting as the previews are live HTML, in theory, any animations etc would show in the previews. There are some limitations, including - Some sites disallow their pages to be loaded into frames, could be slow if lots of previews are displayed at once, more work is needed to check browser support and memory usage etc etc, but initial PoC looks interesting so far. This work is based on a thread on Stack Overflow


Technique 2 - HTML rendered into CANVAS

This approach is 100% client-side, and leverages the HTML Canvas region. The "sign" is loaded via JavaScript, and then rendered as an image into the DOM. This uses HTML2Canvas.js

After spending an hour or so looking at this, it appears unsuitable for our purposes, too many limitations, including inability to load cross domain etc. Hence, no sign displayed below.


Technique 3 - Server-side using CutyCapt and xvfb

This approach is entirely serverside, which means the screenshots are catpured at the point of create/saving of the sign, and storage will be needed. For demo purposes, I have coded this to create and return the screenshots, to give an idea of processing times etc. Choose a sign below to fire a screenshot creation and response. You can read more about CutyCapt here, and Xfvb here

Select an option from the combobox above to load a screen capture

This seems to be a bit unreliable - The capture works well for signs (Simple HTML and very little JavaScript/CSS, but FAILS for remote website URLS....more testing/evaluation is required to here to work out if this is reliable enough for this, or if there are any params that can be used to improve this. There is also a questionmark over Centos 6.5/7 support for this.


Technique 4 - Server-side using WKHTMLImage

This is another server-side approach, which means the screenshots are catpured at the point of create/saving of the sign, and storage will be needed. For demo purposes, I have coded this to create and return the screenshots, to give an idea of processing times etc. Choose a sign below to fire a screenshot creation and response. You can read more about WkHTMLtoImage here

Select an option from the combobox above to load a screen capture

So far, this looks like the most solid solution. The dependencies can be included as part of the codebase (via Composer) and are pretty simple to install.


Technique 5 - Server-side using PhantomJS

This is another server-side approach, this time leveraging PhantomJS and php-phantomjs. For demo purposes, I have coded this to create and return the screenshots, to give an idea of processing times etc. Choose a sign below to fire a screenshot creation and response. You can read more about PhantomJS here, and details about php-phantomjs can be found here

Select an option from the combobox above to load a screen capture

This also looks like a pretty solid solution. The dependencies can be included as part of the codebase (via Composer) and are pretty simple to install.