Introducción a OpenCV JavaScript
Este tutorial discutirá OpenCV en JavaScript usando el enlace opencv.js de OpenCV.
Introducción a OpenCV JavaScript
OpenCV se está utilizando en aplicaciones de procesamiento de imágenes y visión por computadora. OpenCV admite muchos lenguajes de programación como Python, Java y C++, que podemos usar para crear aplicaciones de visión por computadora.
En el desarrollo web, podemos construir sitios web con aplicaciones de procesamiento de imágenes y visión artificial utilizando el enlace opencv.js de OpenCV. Además, podemos usar OpenCV con JavaScript para construir sitios web para aplicaciones de procesamiento multimedia.
Podemos usar un subconjunto de funciones de OpenCV para el desarrollo web, como las funciones de visión de OpenCV. Sin embargo, para usar las funciones de OpenCV en una página web, tenemos que vincular el enlace opencv.js con la página web usando la etiqueta <script> de HTML.
Podemos vincular la dirección del archivo, o podemos descargarlo y luego vincularlo con el archivo .html.
Si vinculamos la dirección del archivo en el archivo .html, necesitaremos que Internet cargue el archivo cada vez que ejecutemos el archivo .html. Sin embargo, si descargamos y enlazamos el archivo opencv.js con el archivo .html, no se requerirá internet para llevar el archivo.
Por ejemplo, podemos usar la siguiente línea de código para vincular el archivo opencv.js usando la dirección del archivo usando la etiqueta <script> en el archivo .html. Vea el código a continuación.
<script async src="https://docs.opencv.org/4.5.0/opencv.js" type="text/javascript"></script>
En el código anterior, también podemos ver el número de versión de OpenCV en la dirección del enlace, que podemos cambiar según la versión que queramos usar. Finalmente, tenemos que usar un contenedor gráfico para mostrar nuestra imagen en una página web.
Podemos usar la etiqueta <canvas> de HTML, que es un contenedor gráfico para mostrar nuestra imagen usando la función imshow() de OpenCV. Debemos pasar el id del contenedor canvas y la imagen que leemos con la función imread() dentro de la función imshow() para mostrarla.
Por ejemplo, creemos una página web simple usando HTML y usemos las funciones imread() y imshow() de OpenCV para leer y mostrar una imagen en una página web. Vea el código a continuación.
<!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>
Producción:
Para ejecutar el código anterior, debemos almacenarlo en un archivo .html y abrirlo con un navegador web.
Hemos usado la función onload() en el código anterior, que se ejecutará cuando carguemos la imagen de entrada, y dentro de esta función, hemos leído y mostrado la imagen usando OpenCV.
