Camera
El objeto
camera
proporciona acceso a la aplicación de la cámara del dispositivo.
Métodos
camera.getPicture
Toma una foto usando la cámara, o obtiene una foto del álbum del dispositivo. La imagen es retornada codificada en base64 como un objeto String
o la URI de un fichero de imagen del álbum.
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
Descripción
La función camera.getPicture
abre la aplicación por defecto de cámara para que el usuario tome una foto (en el caso de Camera.sourceType = Camera.PictureSourceType.CAMERA
, por defecto). Una vez la foto es tomada, la aplicación de la cámara se cierra y tu aplicación vuelve al primer plano.
Si Camera.sourceType = Camera.PictureSourceType.PHOTOLIBRARY
o Camera.PictureSourceType.SAVEDPHOTOALBUM
, entonces se muestra un dialogo para seleccionar una foto del álbum.
El valor que esta función retorna se le pasa a la función 'callback' cameraSuccess
, en uno de los siguientes formatos, dependiendo de lo que especificastes en cameraOptions
:
- Una
String
conteniendo la imagen codificada en Base64 (por defecto). - Una
String
representando la ruta de la imagen en el almacenamiento local.
Puedes hacer lo que desees con la imagen codificada o la URI, por ejemplo:
- Mostrar la imagen en una etiqueta
<img>
(Ver ejemplo mas abajo) - Guardarla localmente (
LocalStorage
, Lawnchair, etc) - Enviar la imagen a un servidor remoto
Nota: La calidad de las imágenes cuando usamos los últimos dispositivos nuevos es demasiado buena. Codificar estas imágenes en Base64 puede causar problemas de memoria en algunos de estos dispositivos (iPhone 4, BlackBerry Torch 9800). Antes que eso, es recomendable usar FILE_URI como 'Camera.destinationType'.
Plataformas Soportadas
- Android
- Blackberry WebWorks (OS 5.0 y superior)
- iPhone
Ejemplo Rápido
Toma una foto y la retorna codificada en base64:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });
function onSuccess(imageData) {
var image = document.getElementById('miImagen');
image.src = "data:image/jpeg;base64," + imageData;
}
function onFail(message) {
alert('Ocurrió un error: ' + message);
}
Toma una foto y la retorna usando la ruta del fichero:
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageURI) {
var image = document.getElementById('miImagen');
image.src = imageURI;
}
function onFail(message) {
alert('Ocurrió un error: ' + message);
}
Ejemplo Completo
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de Camera</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
var pictureSource; // Origen de la imagen
var destinationType; // Formato del valor retornado
// Espera a que PhoneGap conecte con el dispositivo.
//
document.addEventListener("deviceready",onDeviceReady,false);
// PhoneGap esta listo para usarse!
//
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Llamada cuando la foto se retorna sin problemas
//
function onPhotoDataSuccess(imageData) {
// Descomenta esta linea para ver la imagen codificada en base64
// console.log(imageData);
// Obtiene el elemento HTML de la imagen
//
var smallImage = document.getElementById('smallImage');
// Revela el elemento de la imagen
//
smallImage.style.display = 'block';
// Muestra la foto capturada
// Se usan reglas CSS para dimensionar la imagen
//
smallImage.src = "data:image/jpeg;base64," + imageData;
}
// Llamada cuando la foto se retorna sin problemas
//
function onPhotoURISuccess(imageURI) {
// Descomenta esta linea para ver la ruta URI al fichero de imagen
// console.log(imageURI);
// Obtiene el elemento HTML de la imagen
//
var largeImage = document.getElementById('largeImage');
// Revela el elemento de la imagen
//
largeImage.style.display = 'block';
// Muestra la foto capturada
// Se usan reglas CSS para dimensionar la imagen
//
largeImage.src = imageURI;
}
// Un botón llamara a esta función
//
function capturePhoto() {
// Toma la imagen y la retorna como una string codificada en base64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50 });
}
// Un botón llamara a esta función
//
function capturePhotoEdit() {
// Toma la imagen, permite editarla y la retorna como una string codificada en base64
navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 20, allowEdit: true });
}
// Un botón llamara a esta función
//
function getPhoto(source) {
// Retorna la ruta del fichero de imagen desde el origen especificado
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 50,
destinationType: destinationType.FILE_URI,
sourceType: source });
}
// Llamado cuando algo malo ocurre
//
function onFail(message) {
alert('Ocurrió un error: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Capturar foto</button> <br>
<button onclick="capturePhotoEdit();">Capturar foto editable</button> <br>
<button onclick="getPhoto(pictureSource.PHOTOLIBRARY);">Desde la librería de imágenes</button><br>
<button onclick="getPhoto(pictureSource.SAVEDPHOTOALBUM);">Desde el álbum de fotos</button><br>
<img style="display:none;width:60px;height:60px;" id="smallImage" src="" />
<img style="display:none;" id="largeImage" src="" />
</body>
</html>
cameraSuccess
Función 'callback' onSuccess que proporciona información de la imagen.
function(imageData) {
// Hacer algo con la imagen
}
Argumentos
-
imageData: Imagen codificada en Base64, o la ruta URI del fichero de imagen, según la opción que uses en
cameraOptions
. (String
)
Ejemplo
// Mostrar imagen
//
function cameraCallback(imageData) {
var image = document.getElementById('miImagen');
image.src = "data:image/jpeg;base64," + imageData;
}
cameraError
Función 'callback' onError que proporciona un mensaje de error.
function(message) {
// Muestra un mensaje de ayuda
}
Argumentos
-
message: El mensaje entregado por el código nativo del dispositivo. (
String
)
cameraOptions
Argumento opcional para personalizar la configuración de la cámara.
{ quality : 75,
destinationType : Camera.DestinationType.DATA_URL,
sourceType : Camera.PictureSourceType.CAMERA,
allowEdit : true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 100,
targetHeight: 100 };
Opciones
quality: Calidad de la imagen. Rango [0, 100]. (
Number
)-
destinationType: Elige el formato del valor retornado. Definido en navigator.camera.DestinationType (
Number
)Camera.DestinationType = { DATA_URL : 0, // Retorna la imagen como una string codificada en base64 FILE_URI : 1 // Retorna la URI del fichero de imagen };
-
sourceType: Elige el origen de la imagen. Definido en nagivator.camera.PictureSourceType (
Number
)Camera.PictureSourceType = { PHOTOLIBRARY : 0, CAMERA : 1, SAVEDPHOTOALBUM : 2 };
allowEdit: Permitir un simple editado antes de la selección. (
Boolean
)-
EncodingType: Elige el formato de codificación del fichero de imagen retornado. Definido en navigator.camera.EncodingType (
Number
)Camera.EncodingType = { JPEG : 0, // Retornar una imagen codificada en JPEG PNG : 1 // Retornar una imagen codificada en PNG };
targetWidth: Ancho en píxeles para dimensionar la imagen. Debe ser usada con targetHeight. Se respetara la proporción de la imagen. (
Number
)-
targetHeight: Altura en píxeles para dimensionar la imagen. Debe ser usada con targetWidth. Se respetara la proporción de la imagen. (
Number
)
Peculiaridades Android
- Ignora el argumento
allowEdit
. - Camera.PictureSourceType.PHOTOLIBRARY y Camera.PictureSourceType.SAVEDPHOTOALBUM muestran siempre el mismo álbum de fotos.
- El argumento Camera.EncodingType no esta soportado.
Peculiaridades BlackBerry
- Ignora el argumento
quality
. - Ignora el argumento
sourceType
. - Ignora el argumento
allowEdit
. - La aplicación debe tener permisos de "inyección de teclas" para poder cerrar la aplicación nativa de la cámara después de que sea tomada.
- Si usas imágenes grandes puedes tener problemas codificando la imagen, esto ocurre en los últimos dispositivos con cámara de alta resolución (Ej: Torch 9800).
Peculiaridades Palm
- Ignora el argumento
quality
. - Ignora el argumento
sourceType
. - Ignora el argumento
allowEdit
.
Peculiaridades iPhone
- La opción
quality
debería ser menor de 50 para evitar errores de memoria en algunos dispositivos. - Cuando se usa la opción
destinationType.FILE_URI
, las fotos se guardan en el directorio temporal de aplicaciones. - Todo el contenido del directorio temporal de aplicaciones se eliminara automáticamente cuando la aplicación termine. También puedes eliminar el contenido de este directorio usando la API
navigator.fileMgr
si te preocupa el espacio de almacenamiento.