Sono programmatore da quasi quarant’anni ma periodicamente devo imparare cose nuove. Sto scrivendo un’applicazione web in php che si appoggia su mysql come base dati. Essendo un’applicazione abbastanza complessa ha tante funzionalità e alcune di queste prevedono lo scatto di una foto.
Esiste la possibilità di scattare con la fotocamera e poi fare l’upload ma ho sempre cercato di fare i miei programmi quanti più semplici e comodi possibile e non volevo far fare cose arzicocolate ai chi l’avrebbe usato.
Un comodo javascript
Cercando su internet ho trovato un javascript che fa il grosso del lavoro, basta scaricare il sorgente e metterlo in line all’html generato dal php o scritto per l’occasione. Il codice lo trovate su GITHUB, una volta scaricato mettete il file webcam.js nella cartella dove avete il sorgente e questa riga nel codice html :
echo '<script type="text/javascript" src="webcam.js"></script>';
Se usate direttamente html mettete solo il codice fra apici, per intero serve a far generare la riga html al php. Con questa istruzione mettiamo a disposizione le funzioni del programma webcam.js al nostro html.
Istruzioni per l’uso
Ora vediamo come con poche semplici righe possiamo attivare le funzioni per visualizzare in un div html quanto ripreso dalla webcam in tempo reale e associare ad un bottone il compito di attivare il salvataggio della foto.
<?php
$amka_ritorno = $_SESSION['ritorno'];
require('testata.php'); // tutte le istruzioni per generare la parte iniziale di una pagina html
echo '<script type="text/javascript" src="../comune/webcam.js"></script>';
echo '<div class="funzioni">Acquisizione fotografia</div>';
echo '<div id="fotocamera"></div>';
echo '<script language="JavaScript">';
echo "Webcam.set({ width: 600, height: 460, image_format: 'jpeg',jpeg_quality: 90,constraints: {facingMode: 'environment'} });";
echo "Webcam.attach( '#fotocamera' );";
echo '</script>';
echo '<form> <input type=button value="Ritorna" onClick="ritorna()"> <input type=button value="Acquisisci" onClick="take_snapshot()"> </form>';
echo ' <script language="JavaScript">';
echo ' function ritorna() {window.location.href = "'.$amka_ritorno.'";}';
echo ' function take_snapshot() {';
echo ' Webcam.snap( function(data_uri) {';
echo " Webcam.upload( data_uri, 'salva_foto.php', function(code, text) {";
echo ' window.location.href = "'.$amka_ritorno.'"';
echo ' } );';
echo ' } );';
echo ' }';
echo '</script>';
Come per le istruzioni precedenti se usate direttamente html copiate solo il codice fra apici. Nella parte html abbiamo un div “funzioni” per il titolo, poteva anche essere il classico H1 e un form con due bottoni, uno associato alla funzione ritorno che riporta al programma che ha chiamato questa funzione (logicamente va impostato prima di chiamarlo, poi spiego meglio) l’altro salva la foto chiamando un ulteriore programma che si chiama salva_foto.php che provvede al salvataggio del file e richiama la funzione di ritorno.
La funzione di ritorno l’ho pensata per evitare di mettere lo stesso codice in tutti i programmi che hanno bisogno di scattare una foto, quindi ogni programma che ha bisogno di una foto imposta la variabile di sessione ritorno e la variabile di sessione nome_file con il nome con cui vuole sia salvata la foto.
A questo punto richiama il programma scatta_foto (il sorgente qua sopra l’ho chiamato così). Questo programma se l’utente clicca sul bottone ritorno riporta al programma chiamante senza aver fatto nulla, se clicca sul bottone scatta salva la foto con l’aiuto del programma salva_foto.php che sta qui sotto e che provvede a generare il file dandogli come nome quello contenuto nella variabile di sessione nome_file.
<?php session_start(); move_uploaded_file($_FILES['webcam']['tmp_name'],$amka_nomefile); ?>
Come vedete con pochissime righe salviamo il file. Naturalmente mancano alcuni controlli tipo la dimensione del file ma si possono aggiungere facilmente.
Se volete dare un’anteprima della foto per permettere di accettarla o rifiutarla potete usare il seguente codice che io ho chiamato visualizza_foto.php
<?php
if (isset($_GET['codice'])) $_SESSION['codice'] = $_GET['codice'];
if (isset($_POST['ritorna'])) {header('Location: '.$_SESSION['ritorno']); exit; }
if (isset($_POST['cancella'])) {
unlink($_SESSION['codice']);
header('Location: '.$_SESSION['ritorno'].'&amk='.$_SESSION['amk']);
exit; }
require('testata.php'); // tutte le istruzioni per generare la parte iniziale di una pagina html
echo '<form style="width:700px;" method="post" action="'.$amks_azione.'.php?amk='.$_SESSION['amk'].'">';
echo '<img src="'.$_SESSION['codice'].'">';
echo ' <input type="submit" name="cancella" value="Elimina foto">';
echo ' <input type="submit" name="ritorna" value="Conferma">';
echo ' </div>';
echo ' </form>';
echo '</body> </html>';
?>
Come potete intuire dal codice se l’utente clicca su elimina foto viene cancellato il file contenente lo scatto, se clicca su conferma si ritorna al programma chiamante. Il nome del file viene passato come variabile get di nome codice visualizza_foto.php?codice=nomefoto.jpeg
Nell’esempio la fotocamera impostata, se presente più di una, è quella posteriore, comoda per chi utilizza l’applicazione sul telefonino, se volete utilizzare quella frontale basta togliere o modificare il parametro facingMode.
Nel prossimo articolo vi spiegherò come fare upload di pdf e dare anteprima.
Maurizio