Possiamo gestire la fotocamera presente sul dispositivo facendo ricorso al servizio $cordovaCamera, il quale espone le funzionalità del plugin cordova-plugin-camera. Grazie a questo plugin possiamo sia acquisire immagini tramite la fotocamera, sia ottenerle dalla galleria di sistema.

Per installare il plugin utilizzeremo il seguente comando:


ionic plugin add cordova-plugin-camera

Per utilizzarlo da codice dovremo, come al solito, assicurarci che esso sia stato caricato in memoria ed inizializzato. Per questo motivo eseguiremo le chiamate ai metodi del servizio $cordovaCamera come callback del metodo $ionicPlatform.ready().

Il seguente è un esempio minimo di codice che attiva la fotocamera per scattare una foto:


$ionicPlatform.ready(function() { 
	$cordovaCamera.getPicture() 
		.then(function(imageURI) { 
				$scope.foto = imageURI; 
			}, 
			function(err) { 
				console.error("Errore nell'acquisizione della foto"); 
			}); 
});

Una volta che l’utente ha scattato la foto, il controllo passa alla funzione di callback in caso di successo che riceve l’indirizzo al file che contiene la foto. Nel nostro esempio tale indirizzo viene assegnato ad una variabile di scope che può essere utilizzata, ad esempio, per mostrare l’immagine nella view corrente tramite un elemento <img>.

Nella chiamata del metodo getPicture() è possibile indicare alcune opzioni che ci consentono di specificare le modalità di acquisizione delle immagini. Ad esempio, potremmo voler accedere al contenuto dell’immagine invece che al suo URI ed specificarne le dimensioni. In questo caso specificheremo il valore opportuno per le opzioni destinationType, targetWidth e targetHeight: 


$ionicPlatform.ready(function() { 
	$cordovaCamera.getPicture({ 
			destinationType: Camera.DestinationType.DATA_URL, 
			targetWidth: 300, 
			targetHeight: 300 
		})
		.then(function(imageData) { 
				$scope.foto = "data:image/jpeg;base64," + imageData; 
			}, 
			function(err) { 
				console.error("Errore nell'acquisizione della foto"); 
			}); 
});

Specificando il valore Camera.DestinationType.DATA_URL otterremo la rappresentazione codificata in Base64 dell’immagine. Inoltre le dimensioni dell’immagine saranno pari a 300×300 pixel.

Lo stesso metodo ci consente di aquisire immagini dalla galleria del dispositivo. E’ sufficiente specificare il valore Camera.PictureSourceType.PHOTOLIBRARY per l’opzione sourceType, come mostrato di seguito:


$ionicPlatform.ready(function() { 
	$cordovaCamera.getPicture({ 
		sourceType: Camera.PictureSourceType.PHOTOLIBRARY 
		}) 
		.then(function(imageURI) { 
				$scope.foto = imageURI; 
			}, 
			function(err) { 
				console.error("Errore nell'acquisizione della foto"); 
			}); 
});

Questo codice aprirà l’app di gestione della galleria di immagini e consentirà all’utente di selezionare una foto. Per la gestione della foto selezionata dall’utente l’approccio rimane identico a quanto visto per l’acquisizione tramite fotocamera.
23 / 29

Rubrica e contatti

I Video di HTML.it

Liste

© HTML.it 1997-2019 | Triboo Media – P. IVA 06933670967 | HTML.it è un periodico telematico reg. Trib. Roma n. 309/2008 | 2.17.4