Question

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

Answer 1

有趣的问题，尽管从头到尾都笼罩着，我希望它会被解决（不可能有一个完整的答案）。您最好的选择是尝试构建一些东西并在遇到困难时寻求帮助。 / p>

画布上的fabric.js对象被渲染到画布上，该对象实际上是图像，并带有动画，该图像只是不断更新...

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

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

Answer 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>

如何将animation fabric.js保存在视频文件中？

2 个答案: