捕获 html5 canvas 输出作为视频或 swf 或 png 序列？

发布于 2024-10-13 12:33:05 字数 872 浏览 5 评论 0原文

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

我在 stackoverflow 上找到了以下用于捕获图像的链接。
将 HTML Canvas 捕获为 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");
}

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

提前致谢。

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦幻的味道 2024-10-20 12:33:05

我建议：

使用 setInterval 将 Canvas 的内容捕获为 PNG 数据 URL。

函数 PNGSequence( 画布 ){
  this.canvas = 画布;
  this.sequence = [];
};
PNGSequence.prototype.capture = 函数( fps ){
  var 上限 = this;
  this.sequence.length=0;
  this.timer = setInterval(function(){
    cap.sequence.push( cap.canvas.toDataURL() );
  },1000/fps);
};
PNGSequence.prototype.stop = 函数(){
  if (this.timer)clearInterval(this.timer);
  删除this.timer；
  返回这个.sequence；
};

var myCanvas = document.getElementById('my-canvas-id');
var recorder = new PNGSequence( myCanvas );
记录器.捕获(15);

//记录5秒
设置超时（函数（）{
  var thePNGDataURLs = recorder.stop();
}, 5000);

将所有这些 PNG DataURL 发送到您的服务器。这将是一个非常大的数据堆。
使用您喜欢的任何服务器端语言（PHP、Ruby、Python）从数据 URL 中剥离标头，以便只留下 Base64 编码的 PNG
使用您喜欢的任何服务器端语言，将 Base64 数据转换为二进制并写出临时文件。
在服务器上使用您喜欢的任何第三方库，将 PNG 文件序列转换为视频。

编辑：关于您对外部图像的评论，您无法从不是 原始干净。一旦您将 drawImage() 与外部图像一起使用，您的画布就会受到污染。从该链接：

所有画布元素的 origin-clean 必须设置为 true。
如果发生以下任何操作，则必须将该标志设置为 false：
[...]
使用原点与原点不同的 HTMLImageElement 或 HTMLVideoElement 调用元素的 2D 上下文的 drawImage() 方法拥有canvas元素的文档对象。
[...]
每当调用 origin-clean 标志设置为 false 的 canvas 元素的 toDataURL() 方法时，该方法都必须引发 SECURITY_ERR 异常。
每当使用正确的参数调用画布元素 2D 上下文的 getImageData() 方法（其 origin-clean 标志设置为 false）时，该方法必须引发 SECURITY_ERR< /code> 异常。

I would suggest:

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

Send all these PNG DataURLs to your server. It'll be a very large pile of data.
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
Using whatever server-side language you like, convert the base64 data to binary and write out temporary files.
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.