DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
24-04-2017

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?

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.

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:

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

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


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

MixitUp 3: animaciones y manipulación del DOM

MixitUp 3: animaciones y manipulación del DOM

anime.js librería para animaciones en JavaScript

anime.js librería para animaciones en JavaScript

Librería para gestos

Librería para gestos

Algunos artículos que te pueden interesar

Animando cosas con CSS

Animando cosas con CSS

Muchos cosas se pueden hacer con un poco de CSS y algo de imaginación, en esta entrada veremos algunos experimentos curiosos con animaciones que pueden servir (por ejemplo) como icono para la "Carga de Página" en nuestro site.

Andrés Cruz 22-06-2015

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

¿Cómo obtener por separado el canal RGB de una imagen con HTML5?

En este artículo veremos como obtener los tres canales RGB de una imagen y operarlos por separados.

Andrés Cruz 15-05-2014

El secreto de las animaciones en JavaScript (requestAnimationFrame())

El secreto de las animaciones en JavaScript (requestAnimationFrame())

En esta entrada veremos cómo realizar algunas simples animaciones en JavaScript mediante requestAnimationFrame() cuya API se encuentra integrada con Canvas.

Andrés Cruz 21-07-2015