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

Question

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

我在stackoverflow上找到了以下用于捕获图像的链接.
将HTML Canvas捕获为gif/jpg/png/pdf？

但是,任何人都可以建议我们是否希望输出是png序列的视频或swf？

编辑:

好了,现在我明白了如何捕获画布数据以存储在服务器上,我试过它,如果我只使用形状,矩形或其他图形,它工作正常,但如果我在canvas元素上绘制外部图像则不行.有人能告诉我如何使用图形或外部图像在画布上绘图来完全捕获画布数据吗？

我使用了以下代码:

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

我会建议:

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 DataURL发送到您的服务器.这将是一大堆数据.

3. 使用您喜欢的任何服务器端语言(PHP,Ruby,Python)从数据URL中删除标题,这样您只剩下base64编码的PNG

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

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

编辑:关于外部图像的注释,您无法从非原始图像的画布创建数据URL .一旦使用drawImage()外部图像,您的画布就会受到污染.从该链接:

所有canvas元素必须以origin-clean设置为true 开头.如果发生以下任何操作,则必须将该标志设置为false:

[...]

元素的2D上下文的drawImage()方法使用a HTMLImageElement或an 来调用,HTMLVideoElement其原点与拥有canvas元素的Document对象的原点不同.

[...]

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

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