javascript 在p5 js中将画布导出为GIF/PNG

lvjbypge 于 2022-12-25 发布在 Java

关注(0)|答案(3)|浏览(297)

我使用Atom Editor。我想用我的画布制作20秒的GIF。saveFrames()有一个限制（我猜）。它允许将. png文件保存为短GIF（3 - 5秒），即使我键入saveFrames("aa","png",15,22);
我发现了CCapture.js，但找不到任何导出画布的代码示例。
不必将其导出为GIF;但是我想至少在画布上无限地保存我的动画的. png快照。我该怎么做呢？
我的动画代码在p5.js：

var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;

function setup() {
  createCanvas(600, 400);
  background(0);
  //saveFrames("aa","png",15,22);
}

function draw() {
  stroke(random(100, 255), 0, random(100, 190));
  strokeWeight(1.5);
  ellipse(x, 100, d1, d1);
  x = x + speed;
  d1 = d1 - 0.6;
  
  if (x > width || x < 0) {
    speed = speed * -1;
    fill(speed * 51);
  }
  
  ellipse(x, 300, d1, d1);
  ellipse(x, 200, 50, 50);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>

JavaScript

来源：https://stackoverflow.com/questions/51232063/exporting-canvas-as-gif-png-in-p5js

3条答案

按热度按时间

ycl3bljg1#

我一直在开发一个支持GIF导出的新库p5.createLoop。
这将运行草图，然后以相同的帧速率渲染GIF。

function setup() {
  createCanvas(600, 400);
  background(0);
  frameRate(22)
  createLoop({duration:15,gif:true})
}

这是一个codePen的完整示例，大约需要两分钟，超过50MB，完全值得

赞(0）回复(0）举报 2022-12-25

bjp0bcyl2#

经过一整天的研究，令人惊讶的是，我发现一个视频上传youtube 2周前：CCapture Video
不要忘记CActure导出（gif大小=画布大小ex2）。

赞(0）回复(0）举报 2022-12-25

kadbb4593#

〉= 1.5.0

P5从1.5.0开始就有saveGif，它允许你将n秒或帧写入到一个可下载的gif文件中。

〈1.5.0

我想至少在画布上无限制地保存动画的. png快照。我该怎么做呢？
你可以在p5.js中使用save(${name}.png)在你想捕捉的每一帧之后直接这样做，这通常会弹出一个对话框，询问你想在哪里保存文件，但是你可以在浏览器中禁用这个功能（从2021年开始），这样图像就会自动发送到默认的下载位置。
例如，在Chrome浏览器（在撰写本文时版本为92.0.4515.159）中，导航到chrome://settings/downloads并禁用"下载前询问每个文件的保存位置"：

在禁用提示符后，我发现p5.js的默认帧率太高，浏览器无法跟上下载速度，所以我在setup中添加了frameRate(4);，这样每秒只运行4帧。您可以根据自己的需要和计算能力稍微加快速度，但一些节流功能帮助我将每个帧干净、顺序地下载到单独的PNG中。
显然，这个过程一点也不方便用户使用（或者说特别优雅）。它的目的是让你自己把草图转换成gif，而不是面向公众的网站的界面功能。也就是说，这个过程确实为互动提供了思路，使用按钮和其他触发器来控制下一帧，以创造性的方式导出。例如，你可以使用按钮来启动/停止动画。或者可编程地确定发射下一帧的特定条件。
下面是添加到草图中的两个相关代码行，您可能希望在本地运行它，而不是将其作为Stack代码片段运行，后者在没有下载权限的沙箱框架中运行：

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js">
  </script>
</head>
<body>
<script>
var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;

function setup() {
  createCanvas(600, 400);
  background(0);
  frameRate(4); // <-- feel free to adjust
}

function draw() {
  stroke(random(100, 255), 0, random(100, 190));
  strokeWeight(1.5);
  ellipse(x, 100, d1, d1);
  x = x + speed;
  d1 = d1 - 0.6;
  
  if (x > width || x < 0) {
    speed = speed * -1;
    fill(speed * 51);
  }
  
  ellipse(x, 300, d1, d1);
  ellipse(x, 200, 50, 50);

  save(`frame_${frameCount}.png`); // <--
}
</script>
</body>
</html>

一旦你下载了框架，你可以使用你最喜欢的PNG-〉GIF创建器。我使用ffmpeg作为描述here：ffmpeg -f image2 -framerate 60 -i frame_%d.png -loop 0 out.gif.
下面是草图前几帧的结果（使用ffmpeg的-vf scale=300x200标记缩小50%，以保持该页面的带宽合理）：

赞(0）回复(0）举报 2022-12-25

我来回答

javascript 在p5 js中将画布导出为GIF/PNG

3条答案

〉= 1.5.0

〈1.5.0

相关问题

热门标签

最新问答