将svg转换为连续图片

使用无头浏览器的连续截图功能

import fs from "fs";
import puppeteer from "puppeteer";
import path from "path";
async function recordSvgAnimation(svgFile, outputImgDir, recordingTime) {
  //验证outputImgDir是否存在
  if (!fs.existsSync(outputImgDir)) {
    fs.mkdirSync(outputImgDir);
  }
  //截取svg文件名，然后创建对应的文件夹
  let svgFileName = path.basename(svgFile, ".svg");
  let svgFileDir = path.join(outputImgDir, svgFileName);
  if (!fs.existsSync(svgFileDir)) {
    fs.mkdirSync(svgFileDir);
  }

  const startTime = Date.now();
  // 启动无头浏览器
  const browser = await puppeteer.launch({ headless: true });

  // 创建新页面
  const page = await browser.newPage();

  // 导航到SVG文件
  await page.goto(`file://${svgFile}`, { waitUntil: "networkidle0" });
  // 开始录制动画的每一帧
  let images = [];
  //   let i = 0;
  while (Date.now() - startTime < recordingTime) {
    // 捕捉当前帧的图像数据
    const imageData = await page.screenshot({ encoding: "binary" });
    images.push(imageData);
  }
  for (let i = 0; i < images.length; i++) {
    let filePath = path.join(svgFileDir, i + ".png");
    fs.writeFileSync(filePath, images[i]);
  }

  // 关闭浏览器
  await browser.close();
}

// 指定SVG文件路径和输出GIF文件路径
const svgFile = "C:/Users/spike/Desktop/nodejstest/11912.svg";
const outputImgDir = "C:/Users/spike/Desktop/nodejstest/output";

// 调用函数录制SVG动画的每一帧并保存为GIF
recordSvgAnimation(svgFile, outputImgDir, 10000);

将连续图片转换为gif或者视频

使用ffcreator