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

清疚 2022-10-06 04:44 142阅读 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 条评论，142人围观）

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

相关阅读

相关 java实现html转png图片

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

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

相关 HTML5 canvas 画布

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

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

相关 AEJoy —— 详解 AE 如何将 png 序列帧导出为 SVGA 动画文件

效果预览 ![20200904135722618.gif][] 我在 PC 上用 OpenGL 实现了一个 svga 预览的程序 ![20200904143029883

╰半夏微凉°/ 2022年12月03日 08:29/ 0 赞/ 1483 阅读

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

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

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

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

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

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

相关 swf到html5转换器,iPixSoft SWF to HTML5 Converter(SWF到HTML5转换器) V3.6.0 官方版[安全工具]...

iPixSoft SWF to HTML5 Converter 是一款有针对性的视频转换器，专注于将Adobe Flash SWF转换为HTML5格式的文件，并具有丰富的编辑功

朱雀/ 2022年10月06日 09:51/ 0 赞/ 339 阅读

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

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

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

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

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

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

相关 html5 canvas 画布基础

canvas 画布基础学习整理的笔记，内容丰富有绘制矩形，绘制线条，绘制二次贝塞尔曲线，绘制弧线等。知识点在代码注释中效果图： ![Center][]

蔚落/ 2022年08月19日 13:08/ 0 赞/ 296 阅读

相关 c#ppt转换为序列png

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

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