javascript - 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)? -

I'm not sure if the title tells the best approach to my problem, then retract me a bit.

My company is establishing an advertising affiliate program. We have a widget that will be displayed on many web pages shortly, and this widget will include an advertising block that is different from our affiliate retailers Will show ads

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

The web development is coming from the world, our initial idea was to create a browser-based UI that non-technical person would have an advertisement (product name, MSRP, sales price, product reviews, etc.) and its dimensions To enter all the content for Using this information, the app will move the ad to "Preview"; Div & gt; Next to the input form for the user to view and update the layout and content of the ad They can then use this HTML preview to adjust the text, product image size, etc. to finish with an acceptable ad layout.

All of these are adequate for us. The hard part is exploring an efficient and scalable way to turn on the HTML preview that we see in a very high quality picture in the browser. You can. When each ad is completed we can take a screenshot of the page, but it will contain several extra steps - copy, save, save and upload the screenshot in the image editor on our server so that we can send the URL of the image to Google Ad Manager for thousands of images. And multiplying these steps of thousands of advertisements, this can be more cumbersome for the process, because we think it is needed.

So, I'm finally searching for a method - this is a browser plugin, with a bookmarket, ruby, java, or javascript etc. This is a way to do this server-side or client-side - That's what we see in the browser window as a few steps in the image that resides on our server. .

Although this works, it seems that whatever takes a screenshot, it has to understand the perception of HTML / CSS rendering, where the ad "image" lies in the dimension (like its dimension and position Basic HTML element), or just cutting out ad squares against the blank white page background (I'm thinking on the lines of Photoshop Action using Magic Wand tool).

If someone has any thoughts or suggestions for sharing, I would appreciate it!

Roth creates an HTML preview, using a server-side language to create an image Can also be trusted as a preview image? For example, using PHP, you may have a server-side script that accepts the GET parameter like:

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

In the PHP script, you will use the ImageRatetro color function to create a high quality blank image, instead of the text where the text will be required, the text imaging with the imaging function Use above the image created.