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

Question

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

我在 * 上找到了以下用于捕获图像的链接。
Capture HTML Canvas as gif/jpg/png/pdf?

但是任何人都可以建议我们是否希望输出是视频或 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");
}

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

提前致谢。

Answer 1

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

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#pixel-manipulation

Answer 2

我建议：

1. 使用 setInterval 将 Canvas 的内容捕获为 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 );
   

2. 将所有这些 PNG 数据 URL 发送到您的服务器。这将是一大堆数据。

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

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

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

编辑：关于您对外部图像的评论，您不能从不是origin-clean 的画布创建数据 URL。只要您将drawImage() 与外部图像一起使用，您的画布就会被污染。从那个链接：

所有画布元素都必须从它们的 origin-clean 设置为 true 开始。 如果发生以下任何操作，则该标志必须设置为 false：

[...]

元素的 2D 上下文的 drawImage() 方法使用 HTMLImageElement 或 HTMLVideoElement 调用，其来源与拥有画布元素的 Document 对象的来源不同。

[...]

每当调用 origin-clean 标志设置为 false 的 canvas 元素的 toDataURL() 方法时，该方法必须引发 SECURITY_ERR 异常。

每当使用其他正确参数调用其 origin-clean 标志设置为 false 的画布元素的 2D 上下文的 getImageData() 方法时，该方法必须引发 SECURITY_ERR 异常。