【发布时间】：2020-03-15 05:52:18
【问题描述】：
我正在尝试从 SVG 动画渲染图像。
这是我的代码。
https://jsfiddle.net/d3bhfa1L/2/
它生成图像序列，但无法从 SVG 捕获动画。
我实际上想将 SVG 动画转换为 mp4 格式，但找不到任何直接的解决方案。所以尝试将SVG动画转换为图像序列，然后将图像序列转换为mp4视频。
/* uniformly named URL object */
var DOMURL = window.URL || window.webkitURL || window;
/* our snapshotting class */
function svg_snapshot(svg_ref, fps, seconds) {
/* DOM object element */
this.svg_ref = svg_ref;
/* svg xml root */
// this.svg_root = svg_ref.contentDocument.documentElement;
this.svg_root = svg_ref;
/* frames per second */
this.fps = fps;
/* total animation duration in seconds */
this.seconds = seconds;
this.svg_root.pauseAnimations();
this.make_step = function (step, time) {
if (time > this.seconds * 1000) {
// animation ended
return false;
}
/* pause for snapshot */
this.svg_root.pauseAnimations();
/* save actual svg state as XML */
var svg_xml = this.svg_root.outerHTML;
/* disable animation elements with simple replacing */
svg_xml = svg_xml.replace(new RegExp('<animate', 'g'), '<not_anim');
/* save as blob */
var svg_data = new Blob([svg_xml], {
type: 'image/svg+xml'
});
/* create data url (creates browsers interal blob: data link) */
var data_url = DOMURL.createObjectURL(svg_data);
/* create bitmap */
var img = new Image();
/* save class reference */
var self = this;
/* mount load process */
img.onload = function () {
self.make_step_next(step, time, this);
};
/* set image url */
img.src = data_url;
};
this.make_step_next = function (step, time, img) {
/* create canvas */
var canvas = document.createElement("canvas");
canvas.setAttribute("width", this.svg_ref.clientWidth);
canvas.setAttribute("height", this.svg_ref.clientHeight);
canvas.style.border = "1px solid black";
/* get canvas 2d contextr */
var ctx = canvas.getContext('2d');
/* drav loaded image onto it */
ctx.drawImage(img, 0, 0);
/* here we can get dataURL (base64 encoded url with image content) */
var dataURL = canvas.toDataURL('image/png');
/*
and here you can do whatever you want - send image
by ajax (that base64 encoded url which you can decode
on serverside) or draw somewhere on page
*/
var finalImg = document.createElement("IMG");
finalImg.src = dataURL;
finalImg.style.border = "1px solid black";
document.body.appendChild(finalImg);
/*
let animation continue - before image is loaded, the
animation is paused - by this is achieved perfect
timing in this serial process
*/
this.svg_root.unpauseAnimations();
var self = this;
var interval = 1000 / this.fps; // one frame interval
setTimeout(function () {
self.make_step(step + 1, time + interval);
}, interval);
};
}
/* usage - parameters: SVG DOM ref, frames per second, duration in seconds */
var item_ref = new svg_snapshot(document.getElementById('Content-R'), 30, 1);
/* start snapshotting */
item_ref.make_step(0, 0);
【问题讨论】：
-
如果你想把SVG转成mp4，可以不用svg to mp4之类的吗？
-
@tmach 我想通过编码转换。
-
svg_to_mp4 不起作用，或者至少似乎不适用于包含 CSS 动画的 SVG。我自己试了两个。其中包括我自己的动画引擎生成的 CSS 动画命令。该网站刚刚制作了静态图片。是的，我确实选择了“MP4”，而不是“JPG”！
标签： javascript html svg svg-animate