Javascript 将html5画布输出捕获为视频、swf或png序列？

我需要将HTML5画布输出作为视频或swf png序列

我在stackoverflow上找到了以下用于捕获图像的链接。

但是有人能建议我们是要输出视频还是png序列的swf吗

编辑：

好的，现在我了解了如何捕获画布数据以存储在服务器上，我尝试了它，如果我只使用形状、矩形或其他图形，但如果我在画布元素上绘制外部图像，则效果很好。 有谁能告诉我，无论我们使用图形还是外部图像在画布上绘制，如何完全捕获画布数据

我使用了以下代码：

var cnv = document.getElementById("myCanvas");
var ctx = cnv.getContext("2d");

if(ctx)
{
  var img = new Image();

  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fillRect(0,0,300,300);
  ctx.fill();

  img.onload = function()
  {
     ctx.drawImage(img, 0,0);
  }

  img.src = "my external image path";

  var data = cnv.toDataURL("image/png");
}

将画布数据放入“data”变量后，我创建了一个新的画布，并在其上绘制捕获的数据，第二个画布上绘制了红色矩形，但外部图像没有

---

提前感谢。

首先，您需要定期从画布捕获像素数据（可能使用JavaScript计时器）。您可以通过在画布的上下文上调用context.getImageData来实现这一点。这将创建一系列图像，您可以将其转换为视频流

我建议：

使用

setInterval

将画布的内容捕获为PNG数据URL

function PNGSequence( canvas ){
  this.canvas = canvas;
  this.sequence = [];
};
PNGSequence.prototype.capture = function( fps ){
  var cap = this;
  this.sequence.length=0;
  this.timer = setInterval(function(){
    cap.sequence.push( cap.canvas.toDataURL() );
  },1000/fps);
};
PNGSequence.prototype.stop = function(){
  if (this.timer) clearInterval(this.timer);
  delete this.timer;
  return this.sequence;
};

var myCanvas = document.getElementById('my-canvas-id');
var recorder = new PNGSequence( myCanvas );
recorder.capture(15);

// Record 5 seconds
setTimeout(function(){
  var thePNGDataURLs = recorder.stop();
}, 5000 );

将所有这些PNG数据URL发送到服务器。这将是一个非常大的数据堆

使用您喜欢的任何服务器端语言（PHP、Ruby、Python）从数据URL中删除标题，这样您就只剩下base64编码的PNG了

使用您喜欢的任何服务器端语言，将base64数据转换为二进制并写出临时文件

使用服务器上您喜欢的任何第三方库，将PNG文件序列转换为视频

编辑：关于您对外部图像的评论，您不能从非外部图像的画布创建数据URL。当您对外部图像使用

drawImage（）

时，您的画布就会受到污染。从该链接：

所有画布元素必须以其“原点清理”设置为true开始。 如果发生以下任何操作，则该标志必须设置为false：

[……]

元素的2D上下文的

drawImage（）

方法是通过一个

HTMLImageElement

或一个

HTMLVideoElement

调用的，该

HTMLVideoElement

的来源与拥有canvas元素的文档对象的来源不同

[……]

每当调用其原始清除标志设置为false的canvas元素的

toDataURL（）

方法时，该方法必须引发

SECURITY\u ERR

异常

每当使用正确的参数调用其原始清除标志设置为false的画布元素的2D上下文的

getImageData（）

方法时，该方法必须引发

SECURITY\u ERR

异常

---

我认为最困难的部分是将这些图像数据合成一个视频/swf文件。您研究过视频/swf文件的二进制文件格式吗？最终，为二进制操作编写Javascript库是可能的，但这绝非小事。@timdream-我完全同意。捕获和流式传输视频从来都不是一件小事。非常感谢phrogz的回答，请查看我编辑的问题，如果您有一些信息，请让我知道。@Bhupi我编辑了我的答案，以涵盖您的变异问题。是否可以从客户端生成以NgDataURL返回的图像列表的视频？如果是，请让我知道如何实现？使用javascript或typescript。