Upscaler.js: Redimensionando imágenes usando Inteligencia Artificial

Publicada el por

Que es Upscaler.js

Upscaler.js es una librería de JavaScript que permite escalar imágenes desde el navegador usando Javascript y/o en un servidor usando Node.

Esta librería esta creada usando redes neuronales que permiten un escalado de hasta 4 veces el tamaño original, es de código abierto, es de uso gratuito y ofrece múltiples modelos listos para usar.

Empezando a codificar

A continuación vamos a detallar los pasos a seguir para hacer uso de esta librería en Javascript desde el navegador, no obstante si necesitamos aprender mas sobre esta librería desde aquí podemos acceder a la documentación oficial.

  1. Para utilizar Upscaler.js, primero debemos incluir la librería en nuestro proyecto, y para ello puedes descargar Upscaler.js desde GitHub y añadirlo a tu proyecto, o instalarlo a través de NPM usando el siguiente comando: 
    npm install upscaler
  2. El siguiente paso es añadir la librería en nuestro HTML usando por ejemplo el tag script: 
    <script src="node_modules/upscaler.js/dist/upscaler.min.js"></script>
  3. Ahora ya tenemos listo nuestro proyecto para hacer uso de la librería, y para ello necesitamos primero crear una instancia de Upscaler.js y pasarle la imagen que deseamos escalar como argumento. Luego, podemos llamar a la función scale para escalar la imagen: 
    <!DOCTYPE html>
<html lang="es">
  <head>
    <title>Upscaler.js</title>
    <meta charset="utf-8">
    <meta name="description" content="description">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <script src="./node_modules/upscaler/dist/browser/umd/upscaler.min.js"></script>
  </head>
  <body>
    <img id="myImage" src="myImage.jpg" width="100" height="100">
    <script>
       const upscaler = new Upscaler();
       const myImage = document.getElementById('myImage');
       upscaler.scale(myImage, function(scaledImage) {
          myImage.src = scaledImage.toDataURL();
       });
    </script>
  </body>
</html>

Para finalizar, Upscaler.js ofrece varias opciones de configuración que puede especificar al crear una instancia de la biblioteca, por ejemplo podríamos especificar la calidad de la imagen escalada, el tamaño máximo de la imagen escalada, etc…

<!DOCTYPE html>
<html lang="es">
   <head>
      <title>Upscaler.js</title>
      <meta charset="utf-8">
      <meta name="description" content="description">
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <script src="./node_modules/upscaler/dist/browser/umd/upscaler.min.js"></script>
   </head>
   <body>
      <img id="myImage" src="myImage.jpg" width="100" height="100">
      <script>
         const upscaler = new Upscaler({ quality: 0.8, maxWidth: 500, maxHeight: 500 });
         const myImage = document.getElementById('myImage');
         upscaler.scale(myImage, function(scaledImage) {
            myImage.src = scaledImage.toDataURL();
         });
      </script>
   </body>
</html>

Con esto ya tendríamos nuestra aplicación para escalar imágenes usando Inteligencia Artificial, además si quieres probar como funciona y los resultado que ofrece la librería, desde aquí puedes acceder a la aplicación de ejemplo que he creado.