捕获html5canvas输出为video或swf或png序列？
我需要将HTML5canvas输出视为video或swf png序列。
我在stackoverflow上找到了以下用于捕获图像的链接。
将HTML Canvas捕获为gif / jpg / png / pdf？
但是，任何人都可以建议我们是否希望输出为png序列的video或swf？
编辑：
好了，我现在明白了如何捕获canvas数据以存储在服务器上，我尝试了它，如果我只使用形状，矩形或其他图形，它工作正常，但如果我在canvas元素上绘制外部图像则不行。 任何人都可以告诉我如何完全捕获canvas数据是否我们使用图形或外部图像在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"); } 在将canvas数据导入我的“数据”变量后，我创建了一个新的canvas并在其上绘制捕获的数据，在第二个canvas上绘制的红色矩形但外部图像没有。
提前致谢。
我会建议：
-
使用
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 ); -
将所有这些PNG DataURL发送到您的服务器。 这将是一大堆数据。
-
使用您喜欢的任何服务器端语言（PHP，Ruby，Python）从数据URL中删除标题，这样您只剩下base64编码的PNG
-
使用您喜欢的任何服务器端语言，将base64数据转换为二进制文件并写出临时文件。
-
在服务器上使用您喜欢的任何第三方库，将PNG文件序列转换为video。
编辑 ：关于外部图像的注释，您无法从非原始图像的canvas创建数据URL。 只要将drawImage()与外部图像一起使用，canvas就会受到污染。 从该链接：
所有canvas元素必须以其origin-clean设置为true开头。 如果发生以下任何操作，则必须将该标志设置为false：
[…]
使用
HTMLImageElement或HTMLVideoElement调用元素的2D上下文的drawImage()方法，该HTMLImageElement的原点与拥有canvas元素的Document对象的原点不同。[…]
每当
toDataURL()其origin-clean标志设置为false的canvas元素的toDataURL()方法时，该方法必须引发SECURITY_ERRexception。每当使用其他正确的参数调用其origin-clean标志设置为false的canvas元素的2D上下文的
getImageData()方法时，该方法必须引发SECURITY_ERRexception。
首先，您希望定期从canvas捕获像素数据（可能使用JavaScript定时器）。 您可以通过在canvas的上下文中调用context.getImageData来完成此操作。 这将创建一系列图像，您可以将其转换为video流。