vue3项目中引入p5.js+ml5.js

在项目中引入p5.js

在index.html中引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>

在页面中使用

拿homeView.vue展示一张图片举例
为 p5.js 添加一个 div 容器

注意：容器必须是 div, 不能错写为 canvas

<template>
  <div class="home">
    <h1>Image classification using MobileNet and p5.js</h1>
    <div id="canvas"></div>
  </div>
</template>

然后在setup中初始化

<script>
// @ is an alias to /src
import { onMounted } from "vue";
// import p5 from "p5js/p5.js/p5.js";
export default {
  name: "HomeView",
  setup() {
    // 绘图回调函数
    let classifier;
    // A variable to hold the image we want to classify
    let img;
    const s = sketch => {
      sketch.preload = () => {
        classifier = ml5.imageClassifier("MobileNet");
        img = sketch.loadImage("/image/logo.png");
      };
      // 调用 p5.js 内置的方法或函数必须在前面加上 'sketch.'
      // 例如：background(0) 需要变成 sketch.background(0)
      sketch.setup = function() {
        sketch.createCanvas(400, 400);
        classifier.classify(img, sketch.gotResult);
        sketch.image(img, 0, 0);
      };
      sketch.gotResult = (error, results) => {
        // Display error in the console
        if (error) {
          console.error(error);
        } else {
          console.log(results);
          createDiv(`Label: ${results[0].label}`);
          createDiv(`Confidence: ${nf(results[0].confidence, 0, 2)}`);
        }
      };
    };
    // 创建并绑定 p5 实例（必须在网页加载完成后）
    onMounted(() => {
      let canvas = document.querySelector("canvas");
      new p5(s, canvas);
    });
  }
};
</script>

p5.js官方文档：https://p5js.org/reference/
ml5js文档：https://ml5js.org/