捕获html5画布输出为视频或swf或png序列？ [英] capturing html5 canvas output as video or swf or png sequence?

问题描述

我需要将HTML5 canvas输出为video或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 =我的外部图像路径; 
 
 var data = cnv.toDataURL（image / png）; 
} 
  

我创建了一个新的画布

提前感谢。

解决方案

我建议：

1. 使用 setInterval 以PNG数据网址捕获Canvas的内容。

     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）; 
    
    //记录5秒
    setTimeout（function（）{
    var thePNGDataURLs = recorder.stop（）; 
   }，5000）; 
     




2. 将所有这些PNG DataURL发送到您的服务器。




3. 使用您喜欢的服务器端语言（PHP，Ruby，Python）从数据中剥离头文件URL



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




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

编辑：对于您对外部图片的评论，一个不是 origin-clean 。一旦你用外部图像使用 drawImage（），你的画布就被污染了。从该链接：

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

[...]

元素的2D上下文 drawImage（）方法使用 HTMLImageElement 或

[...]

[HTMLVideoElement >

每当调用其origin-clean标志设置为false的canvas元素的 toDataURL（）方法时，方法必须每当 getImageData（） SECURITY_ERR 异常。

< >方法调用其原始清除标志设置为false的canvas元素的2D上下文，否则将使用正确的参数调用，该方法必须引发一个 SECURITY_ERR 异常。

I need to take HTML5 canvas output as video or swf png sequence.

I found the following link on stackoverflow for capturing images.
Capture HTML Canvas as gif/jpg/png/pdf?

But can anyone suggest if we want the output to be video or swf of png sequence?

EDIT:

Ok now I understood how to capture the canvas data to store on server, I tried it and it is working fine if I use only shapes, rectangle or some other graphic, but not if I draw external images on canvas element. Can anyone tell me how to capture canvas data completely whether we use graphic or external images for drawing on canvas?

I used the following code:

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");
}

after taking the canvas data into my "data" variable I created a new canvas and draw the captured data on that, the red rectangle drawn on the second canvas but that external image doesn't.

Thanks in advance.

解决方案

I would suggest:

1. Use setInterval to capture the contents of your Canvas as a PNG data 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. Send all these PNG DataURLs to your server. It'll be a very large pile of data.

3. Using whatever server-side language you like (PHP, Ruby, Python) strip the headers from the data URLs so that you are left with just the base64 encoded PNGs

4. Using whatever server-side language you like, convert the base64 data to binary and write out temporary files.

5. Using whatever 3rd party library you like on the server, convert the sequence of PNG files to a video.

Edit: Regarding your comment of external images, you cannot create a data URL from a canvas that is not origin-clean. As soon as you use drawImage() with an external image, your canvas is tainted. From that link:

All canvas elements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:

[...]

The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

[...]

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must raise a SECURITY_ERR exception.

Whenever the getImageData() method of the 2D context of a canvas element whose origin-clean flag is set to false is called with otherwise correct arguments, the method must raise a SECURITY_ERR exception.

这篇关于捕获html5画布输出为视频或swf或png序列？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！