Is it possible to automate taking a screenshot of a portion of a Web page (e.g., denoted by a CSS selector or HTML parent element)?

Question

I'm not sure if the title conveys the best approach to my problem, so let me step back a little bit.

My company is setting up an advertisement affiliate program. We have a widget that will soon be displayed on numerous Web pages, and this widget will contain an advertisement block that will show various ads from our affiliate retailers.

We need a solution that will allow us to quickly (and using as much automation as possible) create thousands of ads for different products. Unfortunately, our ad management service (Google Ad Manager) only accepts image-based ad creatives (it actually accepts Flash, but we don't want to use that). An ad management service that accepts HTML ads might also be a viable solution, if anyone has any suggestions.

Coming from the Web development world, our initial idea was to create a browser-based UI that allows a non-technical person to enter all of the content for an ad (product name, MSRP, sale price, product review, etc.) and its dimensions. Using this information, the application would lay out the ad in a "preview" <div> next to the input form to enable the user to see and update the ad's layout and content. They could then use this HTML preview to adjust the text, product image size, etc., to end up with an acceptable ad layout.

That all seems achievable enough for us. The tricky part is figuring out an efficient and scalable way to turn that HTML preview that we can see in the browser into an image of reasonably high quality. We could take a screenshot of the page when each ad is complete, but that would involve several additional steps - copying the screenshot into an image editor, cropping, saving, and uploading it to our server so that we can point Google Ad Manager to the URL of the image. Multiplying these steps by thousands and thousands of ads, this would make the process more cumbersome than we feel it needs to be.

So, I'm ultimately looking for a method - be it a browser plugin, a bookmarklet, a method for doing this server-side or client-side with Ruby, Java, or JavaScript, etc. - to turn what we see in the browser window into an image that lives on our server in as few steps as is reasonably possible.

However it works, it seems that whatever takes the screenshot will have to either understand the notion of HTML/CSS rendering to know where the extremities of the ad "image" lie (like the dimensions and position of its parent HTML element), or be able to crop out just the ad square against the blank white page background (I'm thinking along the lines of a Photoshop Action using the magic wand tool).

If anyone has any ideas or suggestions to share, I'd very much appreciate it!

Answer 1

Why not copy the div containing the advert into a new blank page, then do a screenshot of that browser window. Then you can easily trim away the browser window and the blank screen. Would that work?

Photoshop has a "trim" command to remove all the white borders. So you could easily do an action to crop a certain amount from each side to remove the browser window, then trim to remove the white. Then you have just the advert. You do have a problem that if the advert has significant whitespace at the edges then it would be lost.

Another way would be to add a 2px magenta (for example) border to the add, and then programmatically get rid of everything outside the border.

Answer 2

I would do the layout of the ad on the server side rather than on the client side, and serve it up to the user as an image rather than HTML. It gives more possibilities, and the step of creating an image from it is already done.

Answer 3

If you are OK with limiting this to a Firefox extension you could look at some of the extensions that are out there for creating screen grabs of pages, one example is http://www.screengrab.org/.

I once helped a guy out that wanted pretty much the same thing as you for a site (now defunct) called uxrepublic.com. I made a prototype for him (based on ScreenGrab) where you could create a screenshot of a whole page, or select part of the page and then upload that screenshot to a server. It did not do what you need with regards to finding out the actual dimensions of the screenshot by looking at html elements, but a competetent web developer should be able to add that feature easily. The prototype I did is still downloadable and the original message thread, which gives some more context, is at:

http://forums.mozillazine.org/viewtopic.php?t=587929

Answer 4

Rather than creating an HTML preview, could you use a server side language to create the image, which could also be relied upon as the preview image? For instance, using PHP's GD and Image Functions you could have a server-side script that accepts GET parameters such as:

http://my.server.tld/ads/adpreview.php?Product=Product+Name&MSRP=$19.99

In the PHP script you would use the imagecreatetruecolor function to create a high quality blank image, place text wherever necessary with the imagestring function and use imagecopy to copy the product image over to the created image.