html页面png序列,javascript – 捕获html5画布输出为视频或swf或png序列？

清疚 2022-10-06 04:44 151阅读 0赞

我会建议：

>使用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文件的顺序转换为视频.

编辑：关于您对外部图像的评论,您不能从不是origin-clean的画布创建数据URL.一旦您使用drawImage()与外部图像,您的画布就会被污染.从该链接：

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.

发表评论取消回复

表情：

评论列表（有 0 条评论，151人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 JavaScript 将 SVG 转换为 PNG

我过去一直使用 canvg 将 SVG 转换为 PNG，但是正如您从链接中看到的那样，它并不支持所有 SVG 功能。如果您使用 D3 或任何喜欢在 SVG 中工作的库，那么您可

男娘i/ 2023年10月02日 13:52/ 0 赞/ 16 阅读

相关如何使用Javascript 和 html canvas 将内联 SVG 保存为 PNG

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="

太过爱你忘了你带给我的痛/ 2023年10月02日 13:51/ 0 赞/ 8 阅读

相关 java实现html转png图片

试过不少html转图片的工具，都不理想，最后找到 [http://cssbox.sourceforge.net/][http_cssbox.sourceforge.net]

梦里梦外;/ 2023年08月17日 16:48/ 0 赞/ 175 阅读

相关 HTML5 svg画布

svg画布创建（svg）线条（line）获取属性修改属性创建矩形（rect）

客官°小女子只卖身不卖艺/ 2023年06月23日 05:58/ 0 赞/ 31 阅读

相关 HTML5 canvas 画布

画布 canvas 与 svg canvas 能够做什么？创建一块小画布（canvas）创建画笔（getC

秒速五厘米/ 2023年06月22日 05:19/ 0 赞/ 34 阅读

相关 gif png jpg html php,使用PHP调整PNG，JPG或GIF文件的大小和重命名

有没有办法，使用PHP，你可以调整从HTML表单的WIDTH(仅PNG，JPG和GIF)发送的图像的最大值，例如500px(所以如果文件是350px宽，那么' t任何拉伸)，并

朱雀/ 2022年10月10日 11:20/ 0 赞/ 157 阅读

相关 html画布动画,HTML5画布CANVAS动画。

就剩那两个大半圆不知道怎么用代码表示了，求大神给看下，怎么设置的才可以以自己的圆心来转。实现旋转的八卦。不能上传视频，有个转的过程图，在最下面。 your browser d

柔光的暖阳◎/ 2022年10月06日 11:45/ 0 赞/ 333 阅读

相关 html页面png序列,javascript – 捕获html5画布输出为视频或swf或png序列？

我会建议： >使用setInterval将Canvas的内容捕获为PNG数据URL. function PNGSequence( canvas )\{ this.canv

清疚/ 2022年10月06日 04:44/ 0 赞/ 152 阅读

相关 vue导出页面内容为html或pdf文件

转换内容为 html 文件 1. 获取要导出组件页面的html的 `dom`元素代码 `Dom.js` 文件中，相关获取 `dom` 元素的方法 get h

迷南。/ 2022年09月02日 11:53/ 0 赞/ 394 阅读

相关 c#ppt转换为序列png

using System; using System.Collections.Generic; using System.Linq; using

向右看齐/ 2022年06月05日 09:09/ 0 赞/ 217 阅读