save css animation to jpeg/png in nodejs

user_2655623 0
Viewed 299

I know that I can write my own animations in phaser or other framework and save jpg of that into a file, or use jimp.

https://www.npmjs.com/package/jimp

However, I would like to know if I can use css animation and then save what I see in front-end into a file in my node backend.

Is there a css engine that I can use to achieve this?

What about these? I think all of them do the animation in client side. https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

I don't want to write any code for each css effect (I wrote a lot for a java application and it is still not satisfying)

node.js animation css
1 Answers

In order to save a rendered animation to a file you need to record that webpage at a very high framerate, then convert all those captured frames to an animated format like GIF (jpeg and png don't support animations as far as I know).

To capture a webpage, you could try phantomjs
Here's an article that explains this: Recording a Website with phantomjs and ffmpeg

var page = require("webpage").create();
page.viewportSize = { width: 640, height: 480 };

page.open("http://www.goodboydigital.com/pixijs/examples/12-2/", function() {
  setInterval(function() {
    page.render("/dev/stdout", { format: "png" });
  }, 25);
});


phantomjs runner.js | ffmpeg -y -c:v png -f image2pipe -r 25 -t 10  -i - -c:v libx264 -pix_fmt yuv420p -movflags +faststart dragon.mp4

The output in this example is mp4 but you could probably tweak the command line params to get a gif.

user_8650380
Related