сохранить анимацию CSS в JPEG / PNG в nodejs

Question

Я знаю, что могу написать свою собственную анимацию в phaser или другом фреймворке и сохранить jpg из этого в файл, или использовать jimp.

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

Однако я хотел бы знать, могу ли я использовать анимацию CSS, а затем сохранить то, что я вижу во внешнем интерфейсе, в файл в моем бэкэнде узла.

Есть ли движок css, который я могу использовать для достижения этой цели?

А как насчет этого? Я думаю, что все они делают анимацию на стороне клиента. https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

Я не хочу писать какой-либо код для каждого эффекта CSS (я много писал для Java-приложения, и он все еще не удовлетворяет)

Answer 1

Чтобы сохранить визуализированную анимацию в файл, вам нужно записать эту веб-страницу с очень высокой частотой кадров, а затем преобразовать все эти захваченные кадры в анимированный формат, такой как GIF (jpeg и png не поддерживают анимацию, насколько я знаю).

Чтобы захватить веб-страницу, вы можете попробовать phantomjs
Вот статья, которая объясняет это: Запись веб-сайта с phantomjs и 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

В этом примере выводом является mp4, но вы, возможно, можете настроить параметры командной строки, чтобы получить gif.