Wie man mit Vue und Canvas intelligente Bilderkennungsanwendungen entwickelt

So verwenden Sie Vue und Canvas zur Entwicklung intelligenter Bilderkennungsanwendungen

Mit der rasanten Entwicklung der künstlichen Intelligenz wurde die Bilderkennungstechnologie in verschiedenen Bereichen weit verbreitet eingesetzt. Vue ist ein beliebtes JavaScript-Framework, das uns beim Erstellen reaktionsfähiger Webanwendungen helfen kann. In diesem Artikel erfahren Sie, wie Sie mit Vue und Canvas eine intelligente Bilderkennungsanwendung entwickeln.

Zuerst müssen wir ein Vue-Projekt erstellen. Vorausgesetzt, Sie haben Node.js und Vue CLI installiert, führen Sie den folgenden Befehl aus, um ein neues Vue-Projekt zu erstellen:

vue create image-recognition-app

Wählen Sie dann die entsprechende Konfiguration aus und warten Sie, bis der Abhängigkeits-Download abgeschlossen ist. Geben Sie nach Abschluss das Projektverzeichnis ein:

cd image-recognition-app

Als nächstes müssen wir einige notwendige Abhängigkeiten installieren. Führen Sie den folgenden Befehl in der Befehlszeile aus:

npm install tensorflow @tensorflow-models/mobilenet @tensorflow/tfjs @tensorflow/tfjs-converter

Diese Abhängigkeitspakete helfen uns bei der Bilderkennung. Als nächstes erstellen wir eine Komponente, die die Logik der Bilderkennung verwaltet. Erstellen Sie eine Datei mit dem Namen ImageRecognition.vue im Verzeichnis src und fügen Sie den folgenden Code hinzu:

<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <canvas ref="canvas" width="500" height="500"></canvas>
    <ul>
      <li v-for="(label, index) in labels" :key="index">
        {{ label.className }}: {{ label.probability.toFixed(2) }}
      </li>
    </ul>
  </div>
</template>

<script>
import * as tf from '@tensorflow/tfjs';
import * as mobilenet from '@tensorflow-models/mobilenet';

export default {
  data() {
    return {
      labels: [],
      model: null,
    };
  },
  methods: {
    async handleImageUpload(event) {
      const file = event.target.files[0];
      const image = await this.loadImage(file);
      this.drawImage(image);
      this.classifyImage(image);
    },
    loadImage(file) {
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
          const image = new Image();
          image.onload = () => resolve(image);
          image.onerror = reject;
          image.src = event.target.result;
        };
        reader.onerror = reject;
        reader.readAsDataURL(file);
      });
    },
    drawImage(image) {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.drawImage(
        image,
        0,
        0,
        canvas.width,
        canvas.height
      );
    },
    async classifyImage(image) {
      this.labels = [];
      if (!this.model) {
        this.model = await mobilenet.load();
      }
      const predictions = await this.model.classify(image);
      this.labels = predictions;
    },
  },
};
</script>

Im obigen Code haben wir das <input>元素来上传图像文件。当用户选择一个图像文件后，handleImageUpload方法会被调用。我们使用FileReader来读取图像文件，并创建一个新的Image对象。然后，我们在<canvas>-Element verwendet, um das Bild zu zeichnen. Schließlich verwenden wir TensorFlow.js- und MobileNet-Modelle, um das Bild zu erkennen und die Erkennungsergebnisse in einer Liste anzuzeigen.

Dann verwenden Sie die ImageRecognition-Komponente in der App.vue-Datei. Ändern Sie die App.vue-Datei und fügen Sie den folgenden Code hinzu:

<template>
  <div id="app">
    <ImageRecognition />
  </div>
</template>

<script>
import ImageRecognition from './components/ImageRecognition.vue';

export default {
  name: 'App',
  components: {
    ImageRecognition,
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>

Jetzt haben wir die Grundeinstellungen von Vue und Canvas abgeschlossen. Führen Sie den folgenden Befehl in der Befehlszeile aus, um den Entwicklungsserver zu starten:

npm run serve

Öffnen Sie http://localhost:8080 im Browser und wählen Sie eine Bilddatei zum Hochladen aus. Das Bild wird im Canvas mit den aufgelisteten Erkennungsergebnissen angezeigt von Objekten im Objekt. Sie können versuchen, verschiedene Bilddateien hochzuladen, um zu sehen, ob die Erkennungsergebnisse korrekt sind.

Herzlichen Glückwunsch! Sie haben mit Vue und Canvas erfolgreich eine intelligente Bilderkennungsanwendung entwickelt. Diese Anwendung kann Objekte in Bildern identifizieren und die Ergebnisse anzeigen.

Zusammenfassung: In diesem Artikel wird erläutert, wie Sie mit Vue und Canvas intelligente Bilderkennungsanwendungen entwickeln. Wir haben gelernt, wie man TensorFlow.js- und MobileNet-Modelle zur Bilderkennung und Vue zum Erstellen von Benutzeroberflächen verwendet. Ich hoffe, dass dieser Artikel für Sie hilfreich ist und Ihnen eine Anleitung und Inspiration für die Entwicklung von Anwendungen im Bereich der Bilderkennung geben kann.

Das obige ist der detaillierte Inhalt vonWie man mit Vue und Canvas intelligente Bilderkennungsanwendungen entwickelt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!