Einführung in OpenCV-JavaScript
In diesem Tutorial wird OpenCV in JavaScript unter Verwendung der opencv.js-Bindung von OpenCV erläutert.
Einführung in OpenCV-JavaScript
OpenCV wird in Bildverarbeitungs- und Computer-Vision-Anwendungen verwendet. OpenCV unterstützt viele Programmiersprachen wie Python, Java und C++, die wir zum Erstellen von Computer-Vision-Anwendungen verwenden können.
In der Webentwicklung können wir Websites mit Computer Vision- und Bildverarbeitungsanwendungen erstellen, indem wir die opencv.js-Bindung von OpenCV verwenden. Darüber hinaus können wir OpenCV mit JavaScript verwenden, um Websites für Multimedia-Verarbeitungsanwendungen zu erstellen.
Wir können eine Teilmenge von OpenCV-Funktionen für die Webentwicklung verwenden, wie die Vision-Funktionen von OpenCV. Um jedoch OpenCV-Funktionen auf einer Webseite zu verwenden, müssen wir die Bindung opencv.js mit der Webseite unter Verwendung des <script>-Tags von HTML verknüpfen.
Wir können die Adresse der Datei verlinken oder sie herunterladen und dann mit der .html-Datei verlinken.
Wenn wir die Adresse der Datei in der .html-Datei verlinken, verlangen wir, dass das Internet die Datei jedes Mal lädt, wenn wir die .html-Datei ausführen. Wenn wir jedoch die Datei opencv.js herunterladen und mit der Datei .html verknüpfen, wird das Internet nicht benötigt, um die Datei zu führen.
Beispielsweise können wir die folgende Codezeile verwenden, um die Datei opencv.js zu verknüpfen, indem wir die Adresse der Datei mit dem Tag <script> in der Datei .html verwenden. Siehe Code unten.
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
Im obigen Code sehen wir auch die Versionsnummer von OpenCV in der Linkadresse, die wir je nach Version ändern können, die wir verwenden möchten. Schließlich müssen wir einen grafischen Container verwenden, um unser Bild auf einer Webseite anzuzeigen.
Wir können das Tag <canvas> von HTML verwenden, das ein grafischer Container ist, um unser Bild mit der Funktion imshow() von OpenCV anzuzeigen. Wir müssen die id des canvas-Containers und das gelesene Bild mit der imread()-Funktion innerhalb der imshow()-Funktion übergeben, um es anzuzeigen.
Lassen Sie uns beispielsweise eine einfache Webseite mit HTML erstellen und die Funktionen imread() und imshow() von OpenCV verwenden, um ein Bild auf einer Webseite zu lesen und anzuzeigen. Siehe Code 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 mat = cv.imread(imgElement);
cv.imshow('canvasOutputContainer', mat);
mat.delete();
};
</script>
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
</body>
</html>
Ausgang:
Um den obigen Code auszuführen, müssen wir ihn in einer .html-Datei speichern und mit einem Webbrowser öffnen.
Wir haben die Funktion onload() im obigen Code verwendet, die ausgeführt wird, wenn wir das Eingabebild laden, und innerhalb dieser Funktion haben wir das Bild mit OpenCV gelesen und angezeigt.
