如何将动画fabricjs保存在视频文件中？答案

【问题标题】：How to save animation fabricjs in a video file?如何将动画fabricjs保存在视频文件中？
【发布时间】：2019-04-23 18:31:50
【问题描述】：

我在画布上有动画对象。我可以将动画保存在 GIF 或 MP4 中吗？作为在 Node.js 上使用 Fabric 将动画逐帧保存在图像中的选项，然后使用 ffmpeg 合并图片

【问题讨论】：

标签： video fabricjs

【解决方案1】：

有趣的问题，虽然离题而且范围很广，我希望它会被关闭（并且不可能给出完整的答案）你最好的办法是尝试构建一些东西并在遇到困难时寻求帮助。

画布上的fabric.js 对象被渲染到画布上，这实际上是一个图像和动画，这个图像只是不断更新......

您可以尝试拍摄画布的快照并在服务器上整理这些快照以尝试创建 gif 或视频

我也刚刚发现了这个：How to save canvas animation as gif or webm? 这可能会有所帮助

【讨论】：

谢谢。在最后一个链接中有一个非常有趣的库 ccapture.js

【解决方案2】：

你可以试试这样的 MediaRecorder API

        var srcImg = "demo.png";
        var canvas = new fabric.Canvas('c');
        var canvas_to_capture = $('canvas#c')[0];
        var fps = 30, mediaRecorder;

        function create_stream(){
                var canvasStream = canvas_to_capture.captureStream(fps);
                //create media recorder from the MediaStream object
                mediaRecorder = new MediaRecorder(canvasStream);
                var chunks = [];
                mediaRecorder.ondataavailable = function(e) {
                    chunks.push(e.data);
                };
                //create dynamic video tag to 
                mediaRecorder.onstop = function(e) {
                    var blob = new Blob(chunks, { 'type' : 'video/mp4' });
                    chunks = [];
                    var videoURL = URL.createObjectURL(blob);
                    var tag = document.createElement('a');
                    tag.href = videoURL;
                    tag.download = 'sample.mp4';
                    document.body.appendChild(tag);
                    tag.click();
                    document.body.removeChild(tag);
                };
                //build the data chunk
                mediaRecorder.ondataavailable = function(e) {
                    chunks.push(e.data);
                };
                //start recording
                mediaRecorder.start();

        }

        function roll(){
            create_stream();
            fabric.Image.fromURL(srcImg, function (oImg) {
                canvas.add(oImg);
                oImg.set('left',0);
                oImg.set('top', 100);
                oImg.scale(.25);
                canvas.renderAll();

                // and then, we can animate the image    
                oImg.animate('left', 200, {
                    onChange: canvas.renderAll.bind(canvas),
                    onComplete: function(){
                        mediaRecorder.stop();
                    },
                });
            });
        }

<html>
    <canvas id="c" width="300" height="300"></canvas>
    <button onclick="roll()">Get</button>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
</html>

【讨论】：