Is it possible to automate taking screenshots of part of a web page (for example, indicated by CSS selector or parent HTML element)?

I'm not sure the headline conveys a better approach to my problem, so let me backtrack a bit.

My company is setting up an affiliate program for advertising. We have a widget that will soon be displayed on numerous web pages, and this widget will contain an ad unit in which various ads from our retailers will be displayed.

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

From the world of web development, our initial idea was to create a browser-based user interface that allows a non-technical person to enter all the content for an ad (product name, MSRP, selling price, product review, etc.) ..) and its dimensions. Using this information, the application will display the ad in a "preview" <div> next to the input form so that the user can see and update the ad layout and content. They can then use this HTML preview to customize the text, image size of the product, etc., to get an acceptable ad layout.

It seems to us quite achievable. The tricky part is an efficient and scalable way to turn this HTML preview that we see in the browser into a fairly high quality image. We could take a screenshot of the page when each ad is completed, but this will require several additional steps: copying the screenshot to the image editor, cropping, saving and uploading to our server so that we can point Google Ad Manager to the image URL. Multiplying these steps by thousands and thousands of announcements will make the process more cumbersome than we think it should be.

, - , , Ruby, Java JavaScript .. - , . , , .

, , , , HTML/CSS, , "" (, HTML-), ( Photoshop Action ).

- , !

+3
4

HTML , ? , PHP GD , script, GET, :

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

PHP script imagecreatetruecoloror , , , imagestring imagecopy .

+2

, , HTML. , .

+1

, Firefox, , , , http://www.screengrab.org/.

, , ( ), uxrepublic.com. ( ScreenGrab), , . , , , html, - . , , - , , , :

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

+1

div, , , . . ?

Photoshop "trim", . , , , , , . . : , .

2px () , , .

0

Source: https://habr.com/ru/post/1720615/


All Articles