Use OpenCV JavaScript para mostrar una imagen
Este tutorial discutirá cómo mostrar una imagen en una página web usando OpenCV en JavaScript.
Use OpenCV JavaScript para mostrar una imagen
Podemos leer una imagen usando la función imread() de OpenCV en JavaScript. Debemos pasar el nombre del elemento canvas, su id o el nombre de un elemento image o su id dentro de la función imread() para leer la imagen.
OpenCV JavaScript guarda la imagen como un tipo cv.Mat, que pertenece a la clase de matriz n-dimensional, y puede almacenar datos en diferentes tipos de datos como doble, flotante, etc. El imread() devuelve un tipo cv.Mat que contiene la imagen con canal RGBA.
Después de leer la imagen, podemos realizar cualquier tarea de procesamiento de imágenes en ella, como cambiar el espacio de color de la imagen, y después de eso, podemos mostrarla en la página web usando la función imshow() de OpenCV.
Necesitamos un contenedor gráfico para mostrar una imagen. Podemos usar la etiqueta <canvas> de HTML para hacer un contenedor gráfico para mostrar la imagen.
La función imshow() tiene dos argumentos de entrada. El primero es el nombre del elemento canvas o su id, y el segundo es la variable que contiene la imagen que queremos mostrar en la página web.
Si la imagen pasada dentro de imshow() es de 8 bits sin firmar, se mostrará tal cual.
Si una imagen es un número entero de 16 bits sin signo o de 32 bits, los píxeles de la imagen se dividirán entre 256 y luego se mostrarán de modo que los valores de píxeles estén dentro del rango aceptable.
Si la imagen es un punto flotante de 32 bits, el píxel se multiplicará por 255, lo asignará en el rango de 0 a 255 y luego mostrará la imagen.
Después de mostrar la imagen, podemos eliminar la variable de la imagen usando la función delete(). Por ejemplo, leamos una imagen en color, la convirtamos en gris y luego la mostremos en la página web junto con la imagen original.
Vea el código de ejemplo 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 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>
Producción:
En el código anterior, usamos la función cvtColor() de OpenCV para convertir la imagen en color a gris.
El primer argumento de la función cvtColor() es una variable que contiene la imagen en color, y el segundo argumento es la variable en la que queremos almacenar la imagen de salida.
El tercer argumento se usa para especificar la conversión de espacios de color como cv.COLOR_RGBA2GRAY convertirá el espacio de color RGBA de la imagen de entrada a gris.
En el código anterior, usamos la función onload() de HTML, que se ejecutará cuando carguemos la imagen de entrada y luego el código que contiene se ejecutará y mostrará la imagen.
También hemos vinculado el archivo opencv.js al archivo .html usando el enlace del archivo, lo que requerirá Internet para llevar el archivo, pero también podemos descargarlo y luego vincularlo con él el .html archivo.
Para ejecutar el código anterior, tenemos que almacenarlo en un archivo .html y luego abrir el archivo con un navegador web.
