Cross-Plattform-Apps mit PhoneGap entwickeln
Seite 3: Kameranutzung
Bitte recht freundlich
Die Kamera ist nach wie vor eins der Top-Features eines jeden Smartphones. Sie in Anwendungen einzubauen, liegt also nah. Obwohl es nur einen Methodenaufruf für die Kamera
gibt,
navigator.camera.getPicture(successCB, failCB, {option});
sind die Möglichkeiten mit diesem vielfältig. Beim Aufruf werden drei Parameter übergeben, im Erfolgsfall erfolgt ein success-Callback. Bei einem Fehler oder Abbruch kommt ein fail-Callback
zum Einsatz.
<!DOCTYPE html>
<html>
<head>
<title>Capture Photo</title>
<script type="text/javascript" charset="utf-8"
src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
// Warten, bis Cordova geladen ist
//
document.addEventListener("deviceready", onDeviceReady, false);
// Cordova ist bereit
//
function onDeviceReady() {
capturePhoto();
}
function capturePhoto() {
navigator.camera.getPicture(onSuccess, onFail, {
quality: 50,
destinationType: Camera.DestinationType.FILE_URI
});
}
function onSuccess(imageURI) {
var image = document.getElementById('myImage');
image.src = imageURI;
}
function onFail(message) {
alert('Fehler: ' + message);
}
</script>
</head>
<body>
<button onclick="capturePhoto();">Foto erstellen</button>
<br>
<img id="myImage" src="" />
</body>
</html>
Im oben gezeigten Codebeispiel wird nach dem obligatorischen onDeviceReady-Event die eigentlichen Bilderfassung mit der Funktion capturePhoto() aufgerufen. Hier findet sich auch die Funktion navigator.camera.getPicture(). Im option-Objekt ist eine Komprimierung des Bilder um 50 Prozent eingestellt und als Rückgabewert soll der Pfad des erstellten Bildes dienen. Im Falle der erfolgreichen Bildaufnahme löst das Programm die onSuccess-Funktion als Callback aus und bekommt den Pfad der Bilddatei übergeben. Das vorliegende Beispiel übernimmt diesen dann einfach für die Anzeige des Bildes als src-Attribut in das img-Tag. Im Fehlerfall wird eine einfache Nachricht mit entsprechender Meldung ausgegeben. Führt man beispielsweise den Code im Emulator ohne Kamera aus, meldet das Programm "keine Kamera vorhanden".
Spezielle Funktionen wie das Einstellen der Bildqualität oder Nachbearbeitung lassen sich in einem options-Objekt festlegen und so konfigurieren. Damit bildet das Objekt den dritten Parameter, der unter anderem folgende Werte annehmen kann:
- quality: Hier wird ein Wert zwischen 1 und 100 erwartet. Er gibt an, wie stark das Bild komprimiert werden soll.
- destinationType: Mit dieser Option lässt sich festlegen, ob der Pfad des Bildes oder eine Repräsentation als base64-codierten String für den Rückgabewert dienen soll. Eine Rückgabe als Binärstrom ist nicht vorgesehen. Dafür wäre der Bildpfad weiterzuverarbeiten und per Dateioperationen darauf zuzugreifen.
Camera.DestinationType = {
// base64 encoded String
DATA_URL : 0,
// Bildpfad als URI
FILE_URI : 1
};
- allowEdit: Diese Option ermöglicht den Bearbeitungsdialog nach der Aufnahme. Hier lässt sich das Bild beschneiden und seine Größe verändern – eben alles, was der Hersteller des Smartphones anbietet. Soll die Nachbearbeitung zugelassen werden, ist die Variable auf "true" zu setzen.
- PictureSourceType: Der Wert besagt, welche Quelle für das Bild zu nutzen ist. Hierbei ist nicht nur die Kamera gemeint. Es lässt sich auch auf eine Fotogalerie oder Albenauswahl zugreifen. Der getPicture-Aufruf steht so als Möglichkeit zur Bildauswahl zur Verfügung.
Camera.PictureSourceType = {
PHOTOLIBRARY : 0,
CAMERA : 1,
SAVEDPHOTOALBUM : 2
};
Damit die API-Aufrufe auch funktionieren, ist das Camera-Core-Plug-in erforderlich. Es wird mit
phonegap local plugin add
https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
eingebunden und schon lässt sich mit dem obigen Codebeispiel experimentieren.
