PARTE 3

CMARA
La cmara es algo propio de los dispositivos mviles que no tenemos en
desktop. Tener esta caracterstica en nuestro dispositivo mvil nos permite
desarrollar aplicaciones que conectan con el mundo que nos rodea.
3.1 Cmara /
TOMAR UNA FOTO

Partimos de la plantilla de la aplicacin de gestos, que tiene preparado camera.js

var app = {
un esqueleto de la aplicacin en HTML / CSS, y las libreras bsicas
cargadas: zepto, fastclick y hammer. ...
tomarFoto: function() {
Vamos a aadir el plugin de la cmara para cordova11. var opciones = { ... };
navigator.camera.getPicture(
De esta forma, podemos acceder al mtodo getPicture que nos
permite hacer una foto. Tenemos que pasarle 3 parmetros: app.fotoCargada,
app.errorAlCargarFoto,
Una funcin que se ejecuta si tomamos la fotografa con xito opciones
);
Una funcin que se ejecuta si hay un error
},
Un diccionario con opciones fotoTomada: function(imageURI){ ... },
1 errorAlTomarFoto: function(message){ ... }
};

(1) Plugin de Cordova para la cmara

http://cordova.apache.org/docs/en/latest/reference/cordova-
plugin-camera/index.html#camera
 3.1 Cmara / TOMAR UNA FOTO
A la funcin de xito se le pasa la foto (los datos en bruto o una
direccin al sistema de ficheros) para poder pintarlo en pantalla. En
el cuerpo, accedemos al elemento imagen de nuestra web (<img>
en el archivo.html) y le asociamos como fuente (src) la foto.
fotoTomada: function(imageURI){
var image = document.querySelector('#foto');
image.src = imageURI;
},
A la funcin de error se le pasa un diccionario con informacin del
error que ha sucedido. Tambin se considera error, por ejemplo, si
el usuario elige hacer una fotografa pero luego cancela la opcin.
errorAlTomarFoto: function(message) {
console.log('Fallo al tomar foto o toma
cancelada: ' + message);
} la foto tomada se guarde en la galera del dispositivo
El diccionario de opciones nos ayuda a describir algunas
caractersticas sobre la captura de la foto. Las ms relevantes para
nosotros son:
Indicamos la calidad de la foto 0 - 100: ms calidad, mayor
tamao
Podemos definir dimensiones (ancho y alto) de la foto, ya que al
tamao original es demasiado grande para manejarla en nuestro
programa
El destino de la foto sirve para indicar si queremos que a nuestra
funcin de xito se le pasen los datos en bruto de la foto, o un
enlace a la foto en el disco
Hay un parmetro booleano que nos ayuda a corregir la
orientacin de la foto porque depende de cmo est montado el
hardware en nuestro dispositivo
Otro parmetro booleano nos sirve para indicar si queremos que
 3.1 Cmara / TOMAR UNA FOTO

Creamos un objeto imagen en nuestra pgina sin fuente.

Accedemos al elemento imagen y enlazamos el contenido de la

foto desde la funcin de xito para que se pinte en la app.

Opciones para tomar una fotografa

http://cordova.apache.org/docs/en/latest/reference/cordova-
plugin-camera/index.html#cameracameraoptions--object
3.2 Cmara /
USANDO EL CANVAS
Las imgenes de una pantalla (de un mvil, computador,
televisin) se dibujan usando pequeos puntos llamados pxeles.
Un computador o terminal mvil maneja la informacin de la
imagen como la informacin de cada pxel de la pantalla. Una
forma habitual es manejar la informacin de color de cada pxel
usando la escala RGB (del ingls Red-Green-Blue), representada
con un valor de 0 a 255 (puede parece un valor un poco raro, pero
es muy normal a sabiendas de cmo manejan informacin los
computadores). Con una combinacin de valores de rojo, verde y
azul podemos representar cualquier color con mucha precisin.
Adems de estos 3 valores, para cada pxel almacenamos un
cuarto valor que indica la transparencia, de forma que 0 es
totalmente transparente y 1 es el color sin ninguna transparencia.
Para procesar la imagen que hemos tomado con la cmara,
podemos usar un elemento especial: el canvas. Es un lienzo
donde podemos pintar cualquier cosa, y se utiliza por ejemplo
para desarrollar videojuegos. Pero, en este caso, lo vamos a usar
para pintar la imagen que hemos tomado con la cmara, y poder
acceder a la informacin de cada pxel de la imagen.
Sobre el (contexto 2D del) canvas dibujamos la imagen usando el
mtodo drawImage.
Canvas del ingls lienzo, usado para referirnos a un
componente web que nos permite pintar sobre
l como un lienzo
Pixel hace referencia a un punto de la pantalla en un
dispositivo que tiene un color y que junto con
otros muchos puntos pinta en pantalla
RGBA sistema para definir un color basado en un %
(Red-Green- de rojo, % de verde y % de azul, adems de una
Blue-Alpha) componente alpha que indica la transparencia
Context del ingls contexto, usado para referirnos al
contexto sobre el que manejamos el canvas, que
puede ser 2D (2 dimensiones)
 3.3 Cmara /
FILTROS
Ahora vamos a aadir los botones necesarios en el HTML/CSS
para realizar las funciones: un botn por cada filtro. Aadimos los
escuchadores.

Una vez dibujado recuperamos la informacin de cada pxel de la

imagen usando sobre el canvas con getImageData.

Ahora vamos a realizar el procesamiento de la imagen. Para ello,

hemos creado una librera que permite modificar la informacin de
los pxeles de la imagen para convertirla en:

Blanco y negro

Sepia Filtro procesamiento que hacemos sobre una fotografa y

que cambia sus componentes de color, por ejemplo,
Negativo pasar una fotografa a blanco y negro

Despus, volveremos a poner la imagen modificada sobre el Image imagen

canvas con putImageData. Data datos
 3.4 Cmara /
CARGAR UNA FOTO DE LA GALERA
Modificamos nuestra maqueta para aadir un botn que permita
cargar una foto de la galera.

Volvemos a llamar a getPicture pero con una opcin especial en

el diccionario de opciones para que como fuente de la imagen use
la galera (PHOTOLIBRARY) en lugar de la cmara.

Los filtros siguen funcionando :)

Picture del ingls fotografa

Height del ingls altura

(3) Repositorio de la app https://github.com/h4ckademy/mooc- Width del ingls ancho

mobile-camera
(4) Plugin de Cordova para la cmarahttp://cordova.apache. Header cabecera
org/docs/en/latest/reference/cordova-plugin-camera/index.
html#camera Footer pie de pgina
(5) Opciones para tomar una fotografahttp://cordova.apache.
org/docs/en/latest/reference/cordova-plugin-camera/index. Photo Library galera de fotos
html#cameracameraoptions--object