Bilder aufnehmen mit Web-App und HTML Elementen in iOS und Android

Foto in Web-App einfügen

Foto in Web-App einfügen

Manchmal machen einem es Apple und Co. auch leicht: sowohl iOS, als auch Android lassen sich dieser Tage über ein ganz einfaches HTML Formular-Element dazu bringen, einen schönen und funktionalen Dialog zu öffnen, über den der User mit seinem Smartphone oder Tablet ein Bild aufnehmen oder aus den lokalen Bildern wählen kann.

Code für nativen Kamera-App Zugriff

Der Code für den Zugriff, bzw. die Aktivierung der nativen Kamera-App ist erfreulich einfach:


<input id="takePictureField" type="file" accept="image/*" />

Beispielanwendung: lokales Foto vom Smartphone laden

Hier noch eine kleine Beispielanwendung, die sowohl auf Desktop-PC, als auch auf iOS und Android läuft:



Fotoapp
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Wählen Sie ein Bild

<input id="inpPicture" type="file" accept="image/*" /> <img id="yourPic" alt="" /><script type="text/javascript">// <![CDATA[
            $("#inpPicture").on("change",function () {
                 if(event.target.files.length == 1 && 
           event.target.files[0].type.indexOf("image/") == 0) {
            $("#yourPic").attr("src",URL.createObjectURL(event.target.files[0]));
        }
            }); 

// ]]></script>


 

Am Anfang steht das eingangs erläuterte INPUT-Element über dessen capture=“camera“ Attribut den nativen (mobilen) Betriebssystemen mitgeteilt wird, dass sich die native Kamera-App auftun soll.
Ein leeres IMG Tag wartet bereits darauf, von der später stattfinden Aktion befüllt zu werden. Diese wird über einen einfachen Event-Handler unter Mithilfe von jQuery abgefangen: Sobald sich das INPUT-Element ändert, der User also ein Foto ausgewählt hat, wird dessen URL als Quelle des leeren Bildes gesetzt.
Damit ist es spielend einfach möglich aus einer reinen Web-Anwendung heraus, dem User auf dem Smartphone einen direkten Zugang zur Kamera-App anzubieten.
Das ausgewählte Bild steht danach der Web-App zur weiteren Verwendung zur Verfügung.

Dieser Beitrag wurde unter HTML5 veröffentlicht. Setze ein Lesezeichen auf den Permalink.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *