Question

I have an animation written in JavaScript. I want to render it to a movie. I do NOT want to do this with an external frame capture program. I want very precise control over timing. I would prefer a system where:

(1) I can make a browser call at every frame, and the browser then renders the current display to an image.

(2) Thus, I get a bunch of images like foo000.svg foo001.svg foo002.svg …

(3) Later, I can convert these svgs to png, and put it into a single movie.

Thanks!

Answer 1

Well, basically you want to render your webpage a lot of times, at given time points. I see the following possibilities.

• There are thumbnailing services on the web, for webpages that require small snapshots of other sites they link to. They are usually free if oyu don’t request too much snapshots per a unit of time. Now I don’t know if there are any that offer to render not only thumbnails, but also non-miniaturized pages. Try looking for one.

  Then there are similar services that offer a full-scale render of webpages, like http://browsershots.org/ , though I think they have a stricter limit on requests from a single source.

  So what your webpage could do is to, after every frame, create a new <img> element with attribute src = "http://somethumbnailingservice.com/?render=www.mywebsite.com". Then, wait until the image loads (there is an event for that in JS) and continue with your animation. To save those images, you can either do that manually from your browser, or look for them in the browser cache… Or, most elegantly, set them via ajax to a server application that will receive and save them.

• To avoid the restrictions of these thumbnailing services, why not build one yourself? Browser rendering engines like Webkit (Safari, Chrome) or Gecko (Firefox) are opensource. This time, at every frame, your javascript application would take the code of your webpage (something like document.getElementsByTagName('html')[0].outerHTML). Then, send it via ajax to your own web application that will make a snapshot. This will be done by running the rendering engine, passing the html markup as input, taking the image output and saving it.

• Finally, a rather silly but maybe still usable method would be to use javascript’s print method. Although this will maybe ask you for printer settings everytime. You surely have a postscript printer installed, that will (as the name says) save the images into postscript instead of printing them on paper. Postscript is not exactly an image format, but it’s still a vector format, so there should be some apps that will convert it to an image. Also, note that CSS settings for printers are often different than those for the screen, so make sure they won’t be 😉