Question

我正在尝试使用fabricJS创建一个应用程序，该应用程序将允许用户在画布上添加视频并在其中添加一些文本。在将视频和文本添加到画布上之前，我已经实现了这一目标。但我不知道将画布导出为mp4格式。

预期输出是，视频正在后台播放，并且视频上有特定位置的文字。

有什么解决方案可以帮助我实现这一目标吗？

在画布上添加了一个视频，我想导出包含视频声音的画布。

这是代码段

$(document).ready(function() {

    canvas = new fabric.Canvas('c');
    canvas.setWidth(480);
    canvas.setHeight(360);

    var video1El = document.getElementById('video1');
    var video1 = new fabric.Image(video1El, {
      left: 0,
      top: 0
    });

    canvas.add(video1);
    video1El.load();

    $(document.body).on('click', '#play' ,function(){
     var iText = new fabric.IText("sample text", {
                fill: 'red',
                fontSize: 60,
                left: 10,
                top: 10
            })
            canvas.add(iText);
        video1El.play();
    });
    
    $(document.body).on('click', '#exportvideo' ,function(){
     //code to export canvas as video
    });

    fabric.util.requestAnimFrame(function render() {
      canvas.renderAll();
      fabric.util.requestAnimFrame(render);
    });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.2.3/fabric.min.js"></script>
<button id="play">play</button>
<button id="exportvideo">Export as video</button>
<canvas id="c" width="300" height="300"></canvas>
<video crossorigin="anonymous" id="video1" style="display: none" class="canvas-img" width="480" height="360">
  <source id="video_src1" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
</video>

Answer 1

快速search engine consultation会有所帮助。

您将必须一帧一帧地捕获很多图片，然后将它们重新粘贴到视频中。
您还必须将源视频的原始音轨添加到新视频中。

一些可以帮助您的搜索结果：
one two} three four

如何导出带声音的mp4等视频格式的fabricJS画布？

1 个答案: