p5.js集成gif.js时报Uncaught ReferenceError: GIF is not defined错

• 脚本加载顺序错误：浏览器按HTML中脚本标签的从上到下顺序解析执行，你把写了new GIF()逻辑的createGif.js放在了gif.js库前面，运行createGif的代码时，gif.js还没加载完成，全局作用域里根本没有GIF这个构造函数，直接触发引用错误。
• 无效脚本引入：gif.worker.js是gif.js内部通过Web Worker调用的文件，不能直接用<script>标签引入；ready.js、mootools.js不是gif.js的必需依赖，不需要额外加载，多余引入反而可能造成变量污染。
• 代码执行时机不对：你在createGif.js顶层直接取this.p5Canvas、执行GIF初始化时，p5还没完成实例初始化，画布元素还没生成，就算解决了加载顺序问题，也会出现拿不到画布、只能导出空白帧的问题。

1. 调整HTML脚本引入结构 #

保留Processing自动生成的禁止修改区块里的p5相关文件，把gif.js移到所有自定义业务脚本之前加载，删掉无效的脚本引入，修改后代码如下：

<!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.min.js"></script>
  <script language="javascript" type="text/javascript" src="myShader.js"></script>
  <script language="javascript" type="text/javascript" src="Larrytarium.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->
  <!-- 先加载gif.js依赖，必须在调用GIF构造函数的代码之前引入 -->
  <script language="javascript" type="text/javascript" src="libraries/gif.js"></script>
  <!-- 最后加载自己写的GIF逻辑文件 -->
  <script language="javascript" type="text/javascript" src="createGif.js"></script>

校验点：打开浏览器开发者工具的Network面板，刷新页面后确认gif.js的请求状态是200，如果返回404说明你写的文件路径不对，修正路径即可，路径错误同样会触发GIF未定义报错。

2. 修正createGif.js的代码逻辑 #

不要在脚本顶层直接执行GIF相关代码，要等p5初始化完成、画布挂载后再运行，同时手动指定gif.worker.js的路径（因为之前没有通过script标签引入，需要告诉gif.js去哪里找这个worker文件），修改后代码如下：

// 等p5初始化完成后再执行逻辑，如果你的业务代码里已经定义了setup函数，把下面的逻辑合并到已有setup末尾即可，不要重复定义setup
window.setup = function() {
  // 初始化完成后可以正确拿到p5生成的canvas元素
  const canvasElement = this.canvas;

  const gif = new GIF({
    workers: 2,
    quality: 10,
    // 配置worker文件路径，和你本地存放gif.worker.js的位置对应
    workerScript: 'libraries/gif.worker.js'
  });

  // 添加画布帧，如果需要录制多帧动画，把addFrame逻辑放到draw循环里，录够指定帧数后再调用render
  gif.addFrame(canvasElement, {delay: 200, copy: true});

  gif.on('finished', function(blob) {
    window.open(URL.createObjectURL(blob));
  });

  gif.render();
}

3. 验证 #

刷新页面后：

• 控制台不再出现Uncaught ReferenceError: GIF is not defined报错
• Network面板中gif.worker.js请求状态为200
• 渲染完成后会自动弹出新窗口展示生成的GIF文件

内容的提问来源于stack exchange，提问作者Type Beta