Plugin, fotocamera. Antonio Gallo

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "Plugin, fotocamera. Antonio Gallo"

Beata Colombo
6 anni fa
Visualizzazioni

1 Plugin, fotocamera Antonio Gallo

2 1 Fotocamera e/o gallery Con il plugin camera è possibile ottenere un'immagine dalla fotocamera o dalla propria gallery. Create un progetto (cartella camera): cordova create camera com.example.camera Camera cd camera cordova platform add android Installate il plugin per accedere alla fotocamera: cordova plugin add org.apache.cordova.camera Inoltre installare il plugin per accedere ai file (serve per ottenere il percorso corretto delle foto prese dalla foto della gallery): cordova plugin add org.apache.cordova.file Codice di index.html: <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, initialscale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> <link rel="stylesheet" href="css/jquery.mobile min.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>hello World</title> </head> <body> <div data-role="page" id="homepage"> <div data-theme="" data-role="header">

3 <div data-role="navbar"> <ul> <li><a data-rel="dialog" dataicon="gear" data-rel="dialog" href="#options">menu</a></li> </ul> <div data-role="content"> <a id="btnfoto" data-role="button" href="#" data-icon="camera" data-iconpos="left">scatta foto</a> <a id="btnfoto2" data-role="button" href="#" data-icon="camera" data-iconpos="left">seleziona foto</a> <div class="anteprima_immagine"> <script type="text/javascript" src="cordova.js"></script> <script src="js/jquery min.js"></script> <script src="js/jquery.mobile js"></script> <script type="text/javascript" src="js/index.js"></script> </body> </html> Nel codice sovrastante sono stati evidenziati in neretto le parti importanti: L'inclusione della libreria jquerymobile: <link rel="stylesheet" href="css/jquery.mobile min.css" /> I due pulsanti che servono per scattare o selezionare una foto: <a id="btnfoto" data-role="button" href="#" data-icon="camera" data-iconpos="left">scatta foto</a> <a id="btnfoto2" data-role="button" href="#" data-icon="camera" data-iconpos="left">seleziona foto</a> L'inclusione di jquery e di jquerymobile (prima del file index.js): <script src="js/jquery min.js"></script> <script src="js/jquery.mobile js"></script> <script type="text/javascript" src="js/index.js"></script> Codice di index.js:

4 var app = { initialize: function() { this.bindevents(); bindevents: function() { document.addeventlistener('deviceready', this.ondeviceready, false); ondeviceready: function() { $("#btnfoto").on("tap", function() { navigator.camera.getpicture(app.oncamerasuccess, app.oncameraerror, { correctorientation: true, quality: 50, destinationtype: navigator.camera.destinationtype.file_uri $("#btnfoto2").on("tap", function() { navigator.camera.getpicture(app.oncamerasuccess2, app.oncameraerror, { //quality: 50, destinationtype: navigator.camera.destinationtype.file_uri, sourcetype : Camera.PictureSourceType.SAVEDPHOTOALBUM oncamerasuccess: function(imageuri) { var html_immagine = "<img width='280px' src='"+imageuri+"' />"; oncamerasuccess2: function(imageuri) { var realpath = ""; window.resolvelocalfilesystemurl(imageuri,

5 function(fileentry) { realpath = fileentry.tourl(); var html_immagine = "<img width='280px' src='"+realpath+"' />"; oncameraerror: function(errormessage) { alert("errore"); }; } app.initialize(); Le parti importanti sono state evidenziate in neretto. Il primo pulsante attaccato l'evento "tap": $("#btnfoto").on("tap", function() { Una volta premuto chiama la funzione getpicture del plugin camera: navigator.camera.getpicture Questa richiede tre parametri: 1. primo parametro: la funzione da eseguire quando la foto è stata ottenuto (oncamerasuccess) 2. la funzione da eseguire in caso di errore (oncameraerror) 3. una serie di opzioni passate sotto forma di letterale oggetto In particolare, come terzo parametro viene passato il seguente letterale oggetto: { correctorientation: true, quality: 50, destinationtype: navigator.camera.destinationtype.file_uri } Siccome non è stato specificato niente la foto si intende da scattare. CorrectOrientation serve a dire di girare la foto se serve per tenerla orizzontale. Quality è un parametro che definisce la qualità

6 dell'immagine. Alla funzione oncamerasuccess viene passato il percorso dell'immagine. Questa non fa altro che inserire un tag immagine nella pagine: var html_immagine = "<img width='280px' src='"+imageuri+"' />"; Nel caso del secondo pulsante, quello che deve prendere la foto dalla gallery: $("#btnfoto2").on("tap", function() { Anche questa volta viene chiamato il metodo: navigator.camera.getpicture ma questa volta la funzione da chiamare è oncamerasuccess2 e i parametri passati come terzo argomento sono diversi: { destinationtype: navigator.camera.destinationtype.file_uri, sourcetype : Camera.PictureSourceType.SAVEDPHOTOALBUM } In questo caso non si specifica la qualità né di correggere l'orientazione (farla causa un errore nella risoluzione del file). Si specifica invece che la foto deve essere presa dall'album di foto (Camera.PictureSourceType.SAVEDPHOTOALBUM) Il metodo oncamerasuccess2 è un po' più complicato da usare. oncamerasuccess2: function(imageuri) { var realpath = ""; window.resolvelocalfilesystemurl(imageuri, function(fileentry) { realpath = fileentry.tourl(); var html_immagine = "<img width='280px' src='"+realpath+"' />";

7 Nel caso di immagine selezionata dalla fotogallery il percorso del file non può essere direttamente usato nell'immagine ma deve essere passato alla funzione resolvelocalfilesystemurl: window.resolvelocalfilesystemurl(imageuri, function(fileentry) { Questa restituisce un oggetto Javascript (fileentry) avente un metodo (tourl) che restituisce il percorso corretto della foto: realpath = fileentry.tourl(); A questo punto si può inserire l'immagine nella pagina: var html_immagine = "<img width='280px' src='"+realpath+"' />"; Le varie opzioni del plugin sono visibili in questa pagina:

Documenti analoghi

Lavorare con i file. Antonio Gallo

Lavorare con i file. Antonio Gallo Lavorare con i file Antonio Gallo info@laboratoriolibero.com 1 Plugin per gestire i file http://docs.phonegap.com/en/edge/cordova_file_file.md.html Permette di lavorare con i file della scheda SD. Per