Blog de Gonzalo

OpenCV (Open Source Computer Vision Library) es una biblioteca de código abierto que se utiliza para el procesamiento de imágenes y la visión por computadora. Permite desarrollar aplicaciones que pueden "ver" el mundo real, identificando objetos, detectando movimiento, reconociendo rostros, etc...
OpenCV.js es la versión de OpenCV compilada para JavaScript usando WebAssembly y permite realizar tareas de visión computacional como detección de rostros, filtros de imágenes o análisis en tiempo real sin instalar software adicional. Para usar OpenCV.js, hay que incluir la biblioteca en tu proyecto HTML. Se puedes usar un CDN o descargar el archivo opencv.js desde la web oficial de OpenCV.

Ventajas y limitaciones

• Ventajas:
  • No requiere instalación en el cliente.
  • Ideal para aplicaciones web interactivas (filtros, análisis en tiempo real).
  • Compatible con navegadores modernos.
• Limitaciones:
  • Más lento que OpenCV en C++ o Python.
  • Algunas funciones avanzadas no están disponibles en OpenCV.js.

Para procesar imágenes con OpenCV.js seguir los siguentes pasos:

• Incluir el fichero OpenCV.js Primero, debes agregar el archivo de OpenCV.js en tu HTML. Puedes usar la CDN oficial o descargarlo y alojarlo tú mismo. Por ejemplo:<script async src="https://docs.opencv.org/4.x/opencv.js" onload="onOpenCvReady();"></script>
• Esperar a que OpenCV esté listo:
  
  

  
  function onOpenCvReady() {
    console.log('OpenCV.js está listo');
    // Aquí puedes comenzar a procesar imágenes
  }
  

• Cargar y mostrar una imagen con un input file y un canvas de html. Y en javascript:
  
  

  
  document.getElementById('fileInput').addEventListener('change', function(e) {
    let file = e.target.files[0];
    let reader = new FileReader();
    reader.onload = function() {
      let img = new Image();
      img.src = reader.result;
      img.onload = function() {
        let canvas = document.getElementById('canvasOutput');
        canvas.width = img.width;
        canvas.height = img.height;
        let ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
        
        // Ahora puedes convertir la imagen en una matriz de OpenCV
        let src = cv.imread(canvas);
        
        // Aquí puedes aplicar diferentes procesos, por ejemplo, convertir a escala de grises
        let gray = new cv.Mat();
        cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
        
        // Mostrar la imagen procesada
        cv.imshow('canvasOutput', gray);
        
        // Liberar memoria
        src.delete();
        gray.delete();
      }
    }
    reader.readAsDataURL(file);
  });
  

• Procesar la imagen: Una vez que tienes la imagen en una matriz de OpenCV (cv.Mat), puedes aplicar diferentes funciones de procesamiento, como detección de bordes, filtrado, detección de objetos, etc.
• Liberar recursos: Recuerda siempre liberar la memoria de las matrices de OpenCV con .delete().

Compartir en twitter