Verwenden Sie OpenCV JavaScript, um ein Bild anzuzeigen
In diesem Tutorial wird das Anzeigen eines Bildes auf einer Webseite mit OpenCV in JavaScript erläutert.
Verwenden Sie OpenCV-JavaScript, um ein Bild anzuzeigen
Wir können ein Bild mit der Funktion imread() von OpenCV in JavaScript lesen. Wir müssen den Namen des canvas-Elements, seine id oder den Namen eines Bild-Elements oder seine id innerhalb der imread()-Funktion übergeben, um das Bild zu lesen.
OpenCV JavaScript speichert das Bild als Typ cv.Mat, der zur n-dimensionalen Array-Klasse gehört, und kann Daten in verschiedenen Datentypen wie double, float usw. speichern. Das imread()-Funktion gibt einen cv.Mat-Typ zurück, der das Bild mit dem RGBA-Kanal enthält.
Nachdem wir das Bild gelesen haben, können wir jede Bildverarbeitungsaufgabe darauf ausführen, wie z. B. das Ändern des Farbraums des Bildes, und danach können wir es mit der Funktion imshow() von OpenCV auf der Webseite anzeigen.
Wir brauchen einen grafischen Container, um ein Bild anzuzeigen. Wir können das <canvas>-Tag von HTML verwenden, um einen grafischen Container zum Anzeigen des Bildes zu erstellen.
Die Funktion imshow() hat zwei Eingabeargumente. Der erste ist der name des canvas-Elements oder seine id, und der zweite ist die Variable, die das Bild enthält, das wir auf der Webseite anzeigen möchten.
Wenn das in imshow() übergebene Bild 8-Bit ohne Vorzeichen ist, wird es so angezeigt, wie es ist.
Wenn ein Bild eine 16-Bit-Ganzzahl ohne Vorzeichen oder eine 32-Bit-Ganzzahl ist, werden die Pixel des Bilds durch 256 geteilt und dann so angezeigt, dass die Pixelwerte in den akzeptablen Bereich fallen.
Wenn das Bild ein 32-Bit-Gleitkommabild ist, wird das Pixel mit 255 multipliziert, im Bereich von 0 bis 255 abgebildet und dann das Bild angezeigt.
Nach der Anzeige des Bildes können wir die Bildvariable mit der Funktion delete() löschen. Lassen Sie uns zum Beispiel ein Farbbild lesen, es in Grau umwandeln und es dann zusammen mit dem Originalbild auf der Webseite anzeigen.
Siehe Beispielcode unten.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Introduction to OpenCV JavaScript</title>
</head>
<body>
<h2>Introduction to OpenCV JavaScript</h2>
<div>
<div class="inputoutputDiv">
<img id="SourceImage" alt="" />
<div class="caption">imagesrc <input type="file" id="InputfileName" name="file" /></div>
</div>
<div class="inputoutputDiv">
<canvas id="canvasOutputContainer"></canvas>
<div class="caption">canvasOutputContainer</div>
</div>
</div>
<script type="text/javascript">
let imgElement = document.getElementById('SourceImage');
let inputElement = document.getElementById('InputfileName');
inputElement.addEventListener('change', (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function () {
let srcImage = cv.imread(imgElement);
let dstImage = new cv.Mat();
cv.cvtColor(srcImage, dstImage, cv.COLOR_RGBA2GRAY);
cv.imshow('canvasOutputContainer', dstImage);
srcImage.delete();
dstImage.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
Ausgang:
Im obigen Code haben wir die Funktion cvtColor() von OpenCV verwendet, um das Farbbild in Grau umzuwandeln.
Das erste Argument der Funktion cvtColor() ist eine Variable, die das Farbbild enthält, und das zweite Argument ist die Variable, in der wir das Ausgabebild speichern möchten.
Das dritte Argument wird verwendet, um die Konvertierung von Farbräumen anzugeben, da cv.COLOR_RGBA2GRAY den RGBA-Farbraum des Eingabebildes in Grau umwandelt.
Im obigen Code haben wir die onload()-Funktion von HTML verwendet, die ausgeführt wird, wenn wir das Eingabebild laden, und dann wird der darin enthaltene Code ausgeführt und das Bild angezeigt.
Wir haben auch die Datei opencv.js mit der Datei .html über den Dateilink verknüpft, was das Internet erfordert, um die Datei zu führen, aber wir können sie auch herunterladen und dann mit der .html verknüpfen. Datei.
Um den obigen Code auszuführen, müssen wir ihn in einer .html-Datei speichern und die Datei dann mit einem Webbrowser öffnen.
