Crea tu App profesional para editar fotos. Procesamiento de Imagen I

Selfies, fotos de actividades, comida, paisajes, …editar fotos que sacamos para poder crear momentos casi como si fuéramos profesionales. ¡Veamos cómo hacerlo!

Compartir imágenes es lo que se lleva. Selfies, fotos de actividades, platos de comida, paisajes, … nada escapa a la moda. Estas costumbres han llevado de la mano la proliferación de aplicaciones que manipulan y editan las fotos que sacamos para poder crear momentos casi como si fuéramos profesionales.

 

 

Quedan muy lejos aquellos tiempos donde Instagram era la única aplicación que poseía filtros para las fotos que se querían publicar en la famosa red social. Hoy en día muchísimas aplicaciones contienen módulos para la edición de fotografías, y nosotros no vamos a ser menos.

Uno de los mayores problemas a los que se enfrenta un desarrollador a la hora de crear una aplicación es el desconocimiento, en ámbitos profundos, de funcionalidades que quiere implementar en su producto. En el caso que nos atañe es el procesamiento de imagen. Este hándicap se puede salvar gracias a las librerías disponibles (de forma gratuita o de pago) que se pueden encontrar por la red. No es necesario que seamos unos expertos para poder aplicar filtros o retocar variables como el brillo o contraste. Veremos cómo hacerlo a continuación.

Como hemos comentado anteriormente, existen infinidad de librerías disponibles para facilitarnos el trabajo de procesamiento de imágenes. Dependiendo del tipo de desarrollo que se esté realizando (nativo, multiplataforma, etc..) se podrán utilizar unas librerías u otras. En el tutorial que explicaremos a continuación se ha creado una aplicación con Cordova y JqueryMobile y la librería que se ha utilizado ha sido CamanJS (http://camanjs.com/). Es una librería para desarrollos creados con JavaScript muy sencilla de utilizar y que proporciona resultados vistosos que añadirán, sin ningún tipo de duda, valor al producto que estemos desarrollando.

 

Crear nuevo proyecto

1. Creamos un nuevo proyecto Cordova escribiendo en la línea de comandos lo siguiente:

   cordova create prueba_apis com.ejemplo.apis Procesamiento

2. Añadimos la plataforma en la que ejecutaremos la aplicación:

   cordova platform add android (ios en caso de apple)

3. Descargamos jquery mobile y copiamos el contenido dentro de la carpeta www/js/jquery. Debe tener los siguientes ficheros:
   • jquery-1.11.3.min.js (o la versión correspondiente)
   • jquery-mobileinit.js
   • jquery.mobile-1.4.5.min.js
4. Hacemos lo mismo con las carpetas correspondientes del css. Dentro de www/css copiamos las siguientes:
   • jquery.mobile-1.4.5.min.css
5. Enlazamos los ficheros en el index.html añadiendo en el head y el body lo siguiente (con la versión descargada de jquery):
   • Head

     <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">

   • Body

     <script type="text/javascript" src="js/jquery/jquery-1.11.3.min.js"></script>
     <script type="text/javascript" src="js/jquery/jquery-mobileinit.js"></script>
     <script type="text/javascript" src="js/jquery/jquery.mobile-1.4.5.min.js"></script>
     

6. Ya que estamos retocando el index comentamos el meta de seguridad para evitar problemas. Es el que contiene esto: http-equiv=»Content-Security-Policy».
7. Dentro del body, añadimos el script de la librería caman. Podemos descargarla y referenciarla dentro del proyecto o añadiremos la referencia url.

   <script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js"></script>

8. Limpiamos el body del index.html para que no muestre nada. Dejamos solamente los scripts.
9. En el index.js dejamos solamenta la función initialize y la llamada a la misma.
10. Ejecutamos la aplicación conectando un smartphone y verificamos que no hay nada en la pantalla. Para ello utilizaremos el siguiente comando.

    cordova run android (ios)

Manipular imagen al inicio

Para empezar la manipulación descargaremos de la red una imagen que vayamos a utilizar para las pruebas. Para que el procesado sea rápido tendremos que tener cuidado de no descargarnos una imagen demasiado grande.

1. Copiamos la imagen descargada dentro de la carpeta img en www.
2. En el index.html añadimos un div en el que irá todo el contenido y le añadimos un padding para meter un margen con los bordes de la pantalla.
3. Añadimos los siguientes elementos:

   <span>Imagen original</span>
   <div>
      <img class="img_orig"/>
   </div>
   <div class="img_pro_div">
      <span>Imagen procesada</span>
      <div>
         <img id="pro_img" class="img_pro" src="img/img_ori.jpg">
      </div>
   </div>

4. Son las mismas imágenes. La segunda es la que se manipulará y se utilizará la primera para comparar resultados.
5. En el idex.css añadimos el estilo de las imágenes:

   .img_orig
   {
       width: 200px;
       height: auto;
       content: url("../img/img_ori.jpg");
   }
   .img_pro_div
   {
       margin-top: 10px;
   }
   .img_pro
   {
       width: 200px;
       height: auto;    
   }

6. En el index.js, dentro de la función initialize, añadimos el siguiente código:

   Caman('#pro_img', function () {
     this.brightness(40);
     this.contrast(-10);
     this.sinCity();
     this.render();
       });
   

   Esta función aplicará a la imagen especificada un brillo y contraste concretos y después, aplicará el filtro “sinCity”. Para aplicar los cambios llamará al método render().
   Dependiendo del tamaño de la imagen el proceso durará más o menos tiempo.

7. Ejecutamos y verificamos que todo funciona correctamente.

 

 

Aplicar filtros

La librería Caman tiene predefinidos una sere de filtros para poder utilizarlos sin muchas complicaciones. A continuación, veremos cómo poder utilizarlos. Aparte de esto, ofrece la oportunidad de que cada uno cree sus propios filtros y las pueda guardar en una biblioteca de filtros. En este tutorial no se contempla esa opción pero está disponible en la documentación de la página web.

1. En el index.html, debajo de las imágenes que hemos añadido, pegamos los siguientes elementos:

   <div class="ui-grid-b">
      <div class="ui-block-a">
         <button id="vintagebtn"onclick="applyVintage()">Vintage</button>
      </div>
      <div class="ui-block-b">
         <button id="noisebtn" onclick="applyNoise()">Noise</button>
      </div>
      <div class="ui-block-c">
         <button id="tiltshiftbtn" onclick="applyTiltshift()">Tilt Shift</button>
      </div>
   </div>
   <div class="ui-grid-b">
      <div class="ui-block-a">
         <button id="vintagebtn" onclick="applyOriginal()">Original</button>
      </div>
      <div class="ui-block-b">
         <button id="noisebtn" onclick="applyLomo()">Lomo</button>
      </div>
      <div class="ui-block-c">
         <button id="tiltshiftbtn" onclick="applyPinhole()">Pinhole</button>
      </div>
   </div>
   

   Tenemos dos filas con tres botones cada uno. Cada botón aplica un filtro y tenemos uno que devuelve la imagen manipulada a su estado original. Todos llamarán a unos métodos definidos en jquery.

2. En el index.js copiamos las funciones a utilizar:

   function applyVintage()
   {
       Caman('#pro_img', function() {
               this.vintage();
               this.render();
             });
   }
   
   function applyNoise()
   {
       Caman('#pro_img', function() {
               this.noise(10);
               this.render();
             });
   }
   
   function applyTiltshift()
   {
       Caman('#pro_img', function() {
               this.tiltShift({
                 angle: 90,
                 focusWidth: 600
               }).render();
             });
   }
   
   function applyOriginal()
   {
       Caman('#pro_img', function() {
               this.revert();
               this.render();
             });
   }
   
   function applyLomo()
   {
       Caman('#pro_img', function() {
               this.lomo();
               this.render();
             });
   }
   
   function applyPinhole()
   {
       Caman('#pro_img', function() {
               this.pinhole();
               this.render();
             });
   }
   

   Y comentamos el código añadido en el paso 4 para no procesar la imagen cuando se inicie la aplicación.

3. Ejecutamos y hacemos las pruebas.

 

 

Utilizar Sliders

Una forma de manipular las variables de las imágenes de una forma sencilla y funcional es la utilización de sliders. De esta forma, el usuario puede especificar el valor de ciertas variables para manipular la imagen a su antojo.

En este tutorial controlaremos el brillo y el contraste.

1. En el index.html añadimos el siguiente div debajo de los botones que se han añadido en último lugar.

   <div>
      <form>   
         <label for="bri">BRILLO</label>
         <input onchange="applyFilters()" id="bri" name="bri" type="range" min="0" max="100" value="0">
         <label for="contrast">CONTRASTE</label>
         <input onchange="applyFilters()" id="contrast" name="contrast" type="range" min="-20" max="20" value="0">
      </form>
   </div>
   

   La primera barra controla el brillo de la imagen en un rango de 0 a 100 y la segunda el contraste en un rango de -20 a 20. Cada vez que se cambia el valor de la barra, se le llama a la función applyFilters.

2. En el index.js añadimos la función applyFilters.

   function applyFilters() {
     var brig = parseInt($('#bri').val());
     var cntrst = parseInt($('#contrast').val());
     console.log("Apply barruan");
       Caman('#pro_img', function() {
         this.revert(false);
         this.brightness(brig);
         this.contrast(cntrst);
         this.render();
       });
   }

   Esta función obtiene los valores de las barras de progreso y las aplica a la imagen. No revierte los cambios realizados anteriormente.

3. Ejecutamos y probamos si todo funciona correctamente.

 

 

El código fuente de este ejemplo lo podéis descargar desde aquí.

Hemos visto cómo podemos, de una manera sencilla, manipular imágenes desde una aplicación desarrollada por nosotros. Esta parte se centra en el procesamiento de las imágenes, pero existe otro ámbito que profundizaremos en un futuro, que es el reconocimiento facial. Pero para eso habrá que esperar al siguiente post.