Question

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

我在stackoverflow上找到了以下用于捕获图像的链接 Capture HTML Canvas as 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

我建议：

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

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 DataURL发送到您的服务器。这将是一大堆数据。
使用您喜欢的任何服务器端语言（PHP，Ruby，Python）从数据URL中删除标题，以便只剩下base64编码的PNG
使用您喜欢的任何服务器端语言，将base64数据转换为二进制文件并写出临时文件。
在服务器上使用您喜欢的任何第三方库，将PNG文件序列转换为视频。

修改：关于外部图片的评论，您无法从非origin-clean的画布创建数据网址。只要将drawImage()与外部图像一起使用，画布就会受到污染。从那个链接：

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

[...]

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

[...]

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

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

Answer 2

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

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

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

2 个答案: