HTML and CSS Reference
In-Depth Information
<li class "button">
<input type "button" value "Foto mit Kamera aufnehmen"
onClick "holeFoto('kamera'); return false;">
</li>
</ul>
</fieldset>
</form>
<div>
<ul class "pageitem" style "background color:#000000">
<center><img style "width:200px;height:300px" id "bild" src ""
/></center>
</ul>
</div>
</body>
</html>
Wie Sie sehen, ist ein Bildbetrachter, der die native Fotobibliothek und die iPhone-
Kamera benutzt, keine hohe Kunst, sondern insgesamt nur ein API-Aufruf. Den Rest
macht PhoneGap fast von allein. Doch der Reihe nach: Wir stellen den Benutzer mit
zwei Buttons vor die Wahl, ob er das Foto aus der Bibliothek auswählen oder mit der
Kamera aufnehmen möchte.
Falls Sie das Beispiel im Simulator, auf einem iPod touch oder einem iPad ausprobieren,
wird der Button zur Kameraaufnahme nicht funktionieren. Die Anwendung stürzt
weder ab, noch gibt es eine Fehlermeldung - es passiert eben einfach gar nichts, da diese
Geräte wie auch der Mac-Simulator keine Kamera besitzen.
Die Variable
sourceType
bestimmt, wo das Foto ausgewählt wird. Wird
sourceType
auf
0
gesetzt, wird beim API-Aufruf die Fotobibliothek aufgerufen. Wird im Gegenzug
der Wert auf
1
gesetzt, wird die Kamera benutzt. Eine weitere Option ist der
quality
-
Parameter: Dieser kann auf einen Wert von 0 bis 100 gesetzt werden und bestimmt die
Qualität des gespeicherten Fotos. Mit der folgenden Zeile wird die API aufgerufen, und
die Optionsparameter werden übergeben:
navigator.camera.getPicture(onSuccess, onFail, options);
Geht alles gut und ist der API-Aufruf erfolgreich, wird die selbst definierte Funktion
onSuccess()
, anderenfalls die Funktion
onFail()
aufgerufen.
function onSuccess(imageData) {
document.getElementById("bild").src "data:image/jpeg;base64," +
imageData;
}
Die Funktion
onSuccess
enthält als Ergebnis des
navigator.camera.getPicture()
-
API-Calls die Bilddaten in der Variablen
imageData
. Die Bilddaten eines jeden Fotos
sind mit Base64 codiert, also einem Verfahren zur Codierung von 8-Bit-Binärdateien in
eine normale Zeichenfolge. Die Bilddaten in der Variablen
imageData
sind also nichts
weiter als ein normaler String.
Diesen String können Sie entweder im lokalen Speicherbereich (Local Storage) spei-
chern, an einen Server übermitteln oder einfach als Bild innerhalb unserer Anwendung
