Bilder auswählen (PC) oder aufnehmen (Smartphone) und in Scriptcase speichern

Bilder auswählen oder aufnehmen und in Scriptcase speichern

Moderne WebApps bieten die Möglichkeit Bilder am PC auswählen oder am Smartphone (Android oder iPhone) aufzunehmen.
Das Bild kann dann direkt an eine Scriptcase Applikation übertragen und dort abgespeichert werden.

Dazu werden zwei Teile benötigt, die in diesem Beispiel in blank-Applikationen von Scriptcase ausgeführt werden.

1. Das Empfangen und Speichern

Die Applikation heißt bei uns ajax_camera_input und wird von der 2. Applikation (unten) aufgerufen.
Dabei wird ihr das Bild und der Dateiname übertragen.
Sie nimmt die Daten entgegen und speichert das Bild lokal auf die Festplatte.

Diese Applikation muss zuerst erstellt und generiert werden.

2. Das Laden, bzw. Aufnehmen des Bildes und das Übertragen

Die Applikation camera_input besteht aus HTML, JS und JQuery-Code.

Sie baut ein Eingabefeld (input) und ein leeres Bild-Objekt (img) auf.
Bei dem Input-Objekt wird neben den üblichen Parametern zum Laden eines Bildes noch der Parameter capture=camera  gesetzt der dafür sorgt, dass bei Smartphones nicht die Auswahl zum Übertragen von gespeicherten Bildern angezeigt wird. Statt dessen wird die Kamera-App des Smartphones gestartet und darauf gewartet dass ein Bild aufgenommen wird.

Das Bild wird dann in JS geladen und via Ajax an die Scriptcase Applikation (aus 1.) übertragen.

Natürlich kann man das Bild auch in eine SQL-Datenbank ablegen, wenn dort ein Image-Manager programmiert wurde oder
die Parameter des gespeicherten Bildes in die Tabelle ablegen, damit es gleich als Image (File) in Scriptcase Forms angezeigt wird.

Da hier ein Blank-Applikation verwendet wird, muss JQuery mit sc_include_lib("jquery");  explizit geladen werden. Bei Forms, etc. geschieht das meist automatisch von Scriptcase.

Quellenhinweis:

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


mit Modifikationen GunterEibl.de  28.05.2019

 

Veröffentlicht in Scriptcase Sniplets Getagged mit: , , , , , ,