I have a html page which has animations which will play over time, i need to take screenshots of the webpage at some intervals (say after every second) and save the images to the disk, so i can use them for further processing,
Its alright if it takes snapshot of a DIV element, as there is a parent div element which covers all the items i want to take the snapshot of..
Please suggest me how can i go about doing this, i can use flash/javascript/php or any technology, thats not a constraint,
OS: Windows or MAC
P.S: I read many pages about taking the screenshot of the webpage, but in most of them, the answer is, since it violates security, its not allowed, but in my case there is no such security required, its a local page
You can write a script using Selenium browse automation
https://code.google.com/p/selenium/
Pick your favorite language (Python, Java, Ruby, etc.) and Selenium library for it
Write a Selenium script which opens the page and waits the amount of time you need
Use Selenium screenshot API https://code.google.com/p/selenium/source/browse/trunk/py/selenium/webdriver/firefox/webdriver.py#70 to take a screenshot and save it to local disk
Selenium API can be further used to query the dimensions of the element – where it appears, so you can post process the screenshot and crop it to relevant area only.
There exist client-side Javascript solutions to transform arbitary HTML DOM to
<canvas>, but the output is not 100% accurate and works only for simple HTML elements.