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

Corazón con CSS

Corazón con CSS

3D Box Control conTweenMax

3D Box Control conTweenMax

Sistema de particulas con Canvas

Sistema de particulas con Canvas

Algunos artículos que te pueden interesar

La propiedad background-clip en CSS

La propiedad background-clip en CSS

La propiedad background-clip permite especificar si el fondo (compuesto por un color y/o imagen) se debe mostrar detrás de su borde.

Andrés Cruz 19-01-2015

Las etiquetas video y audio para multimedia en HTML

Las etiquetas video y audio para multimedia en HTML

En esta entrada hablaremos de las etiquetas vídeo y audio que permiten mostrar contenido multimedia a nuestra web mediante vídeos y audios de distintos formatos.

Andrés Cruz 18-06-2015

Geolocalización con JavaScript

Geolocalización con JavaScript

Con la geolocalización podemos conocer la ubicación geográfica del usuario.

Andrés Cruz 01-09-2013