opencv.js在vue中使用

要在 Vue 中使用 opencv.js，您需要先将 opencv.js 文件加载到 Vue 中。

一种方法是在 `index.html` 中添加以下代码：

<script async src="https://docs.opencv.org/master/opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>

这会在 Vue 项目中加载 opencv.js 文件。

然后，您需要在 Vue 组件中使用 opencv.js 函数。您可以在组件中使用 `mounted` 钩子函数来确保 opencv.js 已经加载完毕。

export default {
  data() {
    return {
      cv: null
    }
  },
  mounted() {
    this.cv = cv;
    console.log(`OpenCV version: ${this.cv.version}`);
  }
}

在这个例子中，我们在组件的 `data` 中定义了一个 `cv` 属性。在 `mounted` 钩子函数中，我们将 `cv` 属性设置为全局的 `cv` 对象。在这里，我们可以使用 `cv.version` 函数来打印 opencv.js 的版本。

现在您可以在 Vue 组件中使用 opencv.js 的函数了。例如：

export default {
  methods: {
    detectFaces(image) {
      const gray = new this.cv.Mat();
      this.cv.cvtColor(image, gray, this.cv.COLOR_RGBA2GRAY, 0);
 
      const faces = new this.cv.RectVector();
      const faceCascade = new this.cv.CascadeClassifier();
      faceCascade.load('haarcascade_frontalface_default.xml');
 
      faceCascade.detectMultiScale(gray, faces, 1.1, 3, 0);
 
      for (let i = 0; i < faces.size(); ++i) {
        const face = faces.get(i);
        const point1 = new this.cv.Point(face.x, face.y);
        const point2 = new this.cv.Point(face.x + face.width, face.y + face.height);
        this.cv.rectangle(image, point1, point2, [0, 255, 0, 255]);
      }
 
      return image;
    }
  }
}

在这个例子中，我们定义了一个 `detectFaces` 函数，它可以检测输入图片中的人脸。我们使用 opencv.js 的函数来加载一个人脸检测器模型，然后使用它来检测人脸。最后，我们在图片上绘制矩形框来标记出检测到的人脸。