En esta entrada veremos cómo emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería suministrada por el propio sistema operativo o instalada desde la tienda de aplicaciones de manera manual por el usuario y pintar la imagen o fotografía en un elemento img.

¿Por qué emplear PhoneGap para emplear la cámara del dispositivo y no JavaScript nativo / HTML5?

Nos podríamos preguntar porqué emplear PhoneGap si podemos hacer la misma operación sin necesidad de emplear PhoneGap con código nativo JavaScript; la razón a esto es que muchas veces esta clase de operaciones son tecnologías en desarrollo, no tiene un gran soporte con los navegadores, o es muy reciente o cada navegador manejar el nombrado en sus operaciones y allí el por qué empleamos PhoneGap que nos permite emplear esta tecnología de manera unificado sin preocuparnos por estos señalamientos anteriores.

Ya explicamos hace una entrada anterior como comenzar con Adobe PhoneGap en Windows y Android en donde se explicó cómo instalar PhoneGap en Windows y la herramienta para el testing en Android; por lo tanto vamos directo al desarrollo del pequeño experimento.

Si seguimos el tutorial anterior, entonces no es necesario que instales el cordova-plugin-camera

Tomando la fotografía desde el dispositivo y empleando la aplicación de galería

Sin ir más lejos, crearemos algunas funciones que nos permitirán realizar lo cometido, lo cual es seleccionar una fotografía de la galería o tomar una foto a través de la cámara del dispositivo, si bien son procesos diferentes, a efectos de la aplicación son procesos muy parecidos, ya que en ambos casos se basa en obtener una imagen, ya sea que esta sea producto de una fotografía o de la selección de una imagen de la galería; primero definimos la función principal de nuestro proyecto JavaScript:

cargarFoto: function(pictureSourceType){
        var options = {
                sourceType: pictureSourceType,
                destinationType: Camera.DestinationType.FILE_URI,
                targetWidth: 300,
                targetHeight: 300,
                quality:100,
                correctOrientation: true,
                saveToPhotoAlbum: true,
                cameraDirection: 1,
        };
        navigator.camera.getPicture(app.fotoCargada, app.errorAlTomarFoto,options)
},

La función getPicture() permite tomar fotografías por alguna de las cámaras que tenga el dispositivo o seleccionar fotografías de la aplicación de galería con que cuente el dispositivo; la función recibe tres parámetros que consisten en una función cuando la carga de la fotografía o imagen fue exitosa, el siguiente parámetro cuando ocurrió un error en la carga y el último o tercer parámetro corresponde a un grupo de opciones que especificamos a continuación:

• sourceType Permite especificar el tipo de fuente de la imagen, como se especifica en el título de esta entrada, la misma puede ser a través de la cámara del dispositivo o a través de la selección de la imagen a través de la galería.
• destinationType Configurado con Camera.DestinationType.FILE_URI nos permite indicar que copie la imagen en el dispositivo y de esta forma al momento de procesar la imagen ya sea producto de la selección en la galería o por la fotografía tomada retornar una URI que procesamos desde el JavaScript
• targetWidth Indica el escalado (ancho) de la imagen en pixeles.
• targetHeight Indica el escalado (largo) de la imagen en pixeles.
• quality La calidad de la imagen expresada en un rango de 0-100.
• correctOrientationRota la imagen según la rotación del dispositivo al momento de tomar la fotografía.
• saveToPhotoAlbum Indica si la foto se registra dentro del dispositivo.

Una vez tomada o seleccionada la fotografía, si no ocurre ningún error se ejecuta la siguiente función:

fotoCargada: function(imageURI){ var img = document.createElement('img'); img.onload = function(){ app.pintarFoto(img) } img.src=imageURI },

Esto ya es opcional, pero en este método debemos realizar alguna operación con la imagen cargada, en este caso nos limitamos a crear desde JavaScript un elemento de tipo img para luego incluir la URI producto de la selección o toma de la foto.

También especificamos un método en caso de ocurrir un error:

errorAlTomarFoto: function(message){        console.log('Fallo al tomar la foto o toma candelada: '+message); },

Por último creamos los eventos onclick de un par de botones según la acción que desee realizar el usuario, es decir, tomar una fotografía o seleccionar una imagen de la galería:

var buttonAction = document.querySelector('#button-action'); buttonAction.addEventListener('click', function(){ app.cargarFoto(Camera.PictureSourceType.CAMERA)}); var buttonGallery = document.querySelector('#button-gallery'); buttonGallery.addEventListener('click', function(){ app.cargarFoto(Camera.PictureSourceType.PHOTOLIBRARY)});

Para esto simplemente debemos cambiar las propiedades

• Camera.PictureSourceType.CAMERA Toma una fotografía desde la cámara del dispositivo.
• Camera.PictureSourceType.PHOTOLIBRARY Abre la aplicación de galería del dispositivo para seleccionar la imagen.

El código HTML de este experimento es el siguiente:

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
    <!-- This is a wide open CSP declaration. To lock this down for production, see below. -->
    <meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />

    <title>Camara</title>
</head>

<body>
    <div class="header">
        <span>Camara</span>
    </div>

    <canvas id="foto"></canvas>

    <div class="button-container">
        <button id="button-action" class="button">Tomar Foto</button>
        <button id="button-gallery" class="button">Imagen de Galería</button>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/camera.js"></script>
</body>

</html>

En dónde camera.js representa a todo el código JavaScript explicado en esta entrada.

La documentación oficial la puedes encontrar en el siguiente enlace: Cordova