如何用JavaScript捕获Chrome引擎渲染的SMIL SVG动画光栅化帧

目标 #

将带动画效果的SMIL格式SVG转换为APNG动图文件。

现有实现思路 #

由于没有找到直接转换的简便方案，采用分步实现的路径：

• 搭建基于node.js + express.js的简易后端，负责读取本地文件系统中存储的SVG图像
• 开发vue.js前端应用，拉取后端返回的SVG资源，在谷歌Chrome浏览器中完成渲染
• 动画播放过程中捕获渲染帧，保存为静态PNG文件（采样率为每秒30帧，即1秒SVG动画对应30张静态PNG）
• 最终通过其他工具将导出的PNG序列合并为单个APNG动图

当前卡点 #

无法正确捕获SVG光栅化后的帧数据。

现有前端核心逻辑 #

代码功能为请求SVG文件、渲染到页面div容器后逐帧调用采样函数，片段如下：

const file = await RequestsService.getFile(i);
const div = document.getElementById("svgContainer");
div.innerHTML = file.svg;

const { width, height } = div.children[0].getBBox();
console.debug(`width: ${width}, height: ${height}`);
const svg = div.children[0];
await svg.pauseAnimations();
let time = 0.0;
const interval = 1.0 / numFrames; // 采样间隔，单位为秒
let count = 0;
while (time < file.duration) {
  console.log(`time=${time}`);
  await svg.setCurrentTime(time);
  await this.takeSnap(svg, width, height);
  time += interval;
  console.debug(`file: ${file.fileName}_${count}`);
}
await svg.setCurrentTime(file.duration);
await this.takeSnap(svg, width, height);

待解决的具体问题 #

• 目前未实现可用的takeSnap()帧捕获函数
• 已尝试Canvg、HTML2png等一系列可直接基于DOM渲染导出网页内容的工具库，没有任何一个库能正确渲染Chrome中可正常显示的SVG对应帧。这类库独立实现SVG解析光栅化逻辑，和浏览器原生渲染结果存在差异属于正常情况，不苛责第三方库的渲染一致性
• 核心咨询点：是否存在可行方案，能够直接获取Chrome中Blink浏览器引擎生成的光栅化像素数据，再将这些光栅像素数据保存为PNG文件？已知该方案可能会丢失SVG的透明通道数据，该问题可后续自行适配解决。

内容的提问来源于stack exchange，提问作者Ali Mizan