如何将 PNG 图像数据数组转换为视频文件

3 浏览
0 Comments

如何将 PNG 图像数据数组转换为视频文件

我通过canvas.getDataURL()从canvas中获取帧。

然而，现在我有一组png图像，但我想要一个视频文件。

我该如何做？

var canvas = document.getElementById("mycanvaselementforvideocapturing");
var pngimages = [];
...
setInterval(function(){pngimages.push(canvas.toDataURL())}, 1000);

0

2 答案

0 Comments

如何将png图像数据数组转换为视频文件？

问题的出现原因：

当前，使用MediaRecorder + canvas.captureStream方法是目前最好的方式。但遗憾的是，截至目前只有Chrome和Firefox支持这种方法。

解决方法：

另一种方法是在浏览器支持webp编码时（目前只有Chrome支持），可以使用以下代码：

let frames = []; // <-- frames must be *webp* dataURLs
let webmEncoder = new Whammy.Video(fps); 
frames.forEach(f => webmEncoder.add(f));
let blob = await new Promise(resolve => webmEncoder.compile(false, resolve));
let videoBlobUrl = URL.createObjectURL(blob);

这段代码使用whammy库将一组webp图像合并成一个webm视频。在支持webp编码的浏览器中，可以使用canvas.toDataURL("image/webp")从画布中获取webp dataURL。有关Firefox对webp支持的相关bug报告，请参见此处。

另一种跨浏览器的方法是使用libwebp.js将canvas.toDataURL()输出的png dataURL转换为webp图像，然后将其传递给whammy编码器以获得最终的webm视频。不幸的是，png到webp的编码过程非常缓慢（在我的笔记本上几秒钟的视频需要数分钟）。

编辑：我发现使用MediaRecorder/captureStream方法得到的输出视频质量较低，与whammy方法相比。因此，除非有办法控制捕获流的质量，否则whammy方法似乎是最好的方法，其他两种方法作为备选方案。请参阅此问题了解更多细节。可以使用以下代码段检测浏览器是否支持webp编码（从而支持whammy方法）：

let webPEncodingIsSupported = document.createElement('canvas').toDataURL('image/webp').startsWith('data:image/webp');

0
0 Comments

如何将一组PNG图像数据转换成视频文件？

最新版本的浏览器中，可以使用canvas.captureStream方法将画布绘制转换为webm视频流，并且可以使用MediaRecorder进行录制。但是这些功能仍然不稳定，并且可能需要在用户首选项中设置一些标志才能使用。

以下是将图像数据转换为视频文件的解决方法（代码）：

var cStream,
  recorder,
  chunks = [];
rec.onclick = function() {
  this.textContent = 'stop recording';
  // set the framerate to 30FPS
  var cStream = canvas.captureStream(30);
  // create a recorder fed with our canvas' stream
  recorder = new MediaRecorder(cStream);
  // start it
  recorder.start();
  // save the chunks
  recorder.ondataavailable = saveChunks;
  recorder.onstop = exportStream;
  // change our button's function
  this.onclick = stopRecording;
};
function saveChunks(e) {
  chunks.push(e.data);
}
function stopRecording() {
  recorder.stop();
}
function exportStream(e) {
  // combine all our chunks in one blob
  var blob = new Blob(chunks)
    // do something with this blob
  var vidURL = URL.createObjectURL(blob);
  var vid = document.createElement('video');
  vid.controls = true;
  vid.src = vidURL;
  vid.onended = function() {
    URL.revokeObjectURL(vidURL);
  }
  document.body.insertBefore(vid, canvas);
}
// make something move on the canvas
var x = 0;
var ctx = canvas.getContext('2d');
var anim = function() {
  x = (x + 2) % (canvas.width + 100);
  // there is no transparency in webm,
  // so we need to set a background otherwise every transparent pixel will become opaque black
  ctx.fillStyle = 'ivory';
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'black';
  ctx.fillRect(x - 50, 20, 50, 50)
  requestAnimationFrame(anim);
};
anim();

如果要在视频中添加音频，可以在调用`new MediaRecorder(cStream)`之前使用`cStream.addTrack(anAudioStream.getAudioTracks()[0])`，但是这样只能在Chrome浏览器中工作。

以上是如何将一组PNG图像数据转换成视频文件的解决方法。

0