由于某种原因，p5.js 库的所有功能都无法正常工作

Question

我正在尝试使用 JavaScript 将一种网格应用于网络摄像头视频。此外，我还想使用 P5.js 库的方法来保存 canvas 图像。 我使用的代码来自： https://github.com/WebDevSimplified/Face-Detection-JavaScript我只是想玩玩它。 当我最初运行这个家伙的代码时，它工作得很好，但就像我说的，我还想使用 P5.js 库，所以这是我的 index.html 来获取库。


<html>
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
  <script defer src="face-api.min.js"></script>
  <script defer src="script.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    canvas {
      position: absolute;
    }
  </style>
</head>
<body>
  <video id="video" width="720" height="560" autoplay muted></video>
</body>
</html>

当我在编辑器中运行代码时，它说我使用的任何方法 like(saveCanvas()) 都没有定义。 我想使用 P5 库的唯一原因是使用此方法，因为我需要 facemesh 图像。 有谁知道代码错误的原因谢谢！

Answer 1

根据我的经验，如果您遗漏部分标签，P5 有时会表现得很奇怪。 试试这个：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>

您也没有指定放置 P5 代码的位置。 如果你是

将它直接嵌入到您的 HTML 的正文中，确保您记住了脚本标签
将它添加到 script.js 或 face-api.min.js - 我不知道这些脚本的内容，但尝试删除延迟，以便 P5 库在任何 DOM 事件发生之前完全加载。 如果这不起作用，请将它们移到 body 标签内（仍然省略 defer）并将 p5 库留在头部。

由于某种原因，p5.js 库的所有功能都无法正常工作

问题描述

1 个解决方案

解决方案1
1 2021-01-10 00:34:26

由于某种原因，p5.js 库的所有功能都无法正常工作

问题描述

1 个解决方案

解决方案1 1 2021-01-10 00:34:26

解决方案1
1 2021-01-10 00:34:26