- Learn
- Guida Ionic Framework
- Fotocamera
Fotocamera
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.
Se vuoi aggiornamenti su AngularJS, JavaScript, mobile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
Francesca Carusone, studenti alla ricerca di opportunità
Al .NET Campus abbiamo incontrato Francesca Carusone, una studentessa che oltre all’opportunità formativa offerta della manifestazione, approfitta dell’evento anche per […]