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

Veröffentlicht am 10.06.2019 von

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.

$pic = $_POST['picture'];
$filename = $_POST['filename'];
if (strlen($pic)>10)
	{
		file_put_contents ('../../image_'.$filename,base64_decode($pic));
		echo "Datei geschrieben";
	}

$pic = $_POST['picture'];

$filename = $_POST['filename'];

if (strlen($pic)>10)

{

file_put_contents ('../../image_'.$filename,base64_decode($pic));

echo "Datei geschrieben";

}

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.

?>
sc_include_lib("jquery");
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<input id="inpPicture" type="file" capture=“camera“ accept="image/*" />
<p>Bild:<br>
<img id="yourPic" width="300px" alt="" />
<br>Ende	
</p>
<script type="text/javascript">
	window.onload = function(){
            $("#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]));
					sendBase64FromImageUrl(URL.createObjectURL(event.target.files[0]),event.target.files[0].name);
				}
            }); 
		};
	
function sendBase64FromImageUrl(url,filename) {
    var img = new Image();

    img.setAttribute('crossOrigin', 'anonymous');

    img.onload = function () {
        var canvas = document.createElement("canvas");
        canvas.width =this.width;
        canvas.height =this.height;

        var ctx = canvas.getContext("2d");
        ctx.drawImage(this, 0, 0);

        var dataURL = canvas.toDataURL("image/png");
        // alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
		$.post( "../ajax_camera_input/index.php",
			{ filename: filename, picture: dataURL.replace(/^data:image\/(png|jpg);base64,/, "") },
			function(response, status){
				return response;
			}
		);

    };

    img.src = url;
}
</script>
<?php

sc_include_lib("jquery");

<br>Ende

</p>

window.onload = function(){

$("#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]));

sendBase64FromImageUrl(URL.createObjectURL(event.target.files[0]),event.target.files[0].name);

}

});

};

function sendBase64FromImageUrl(url,filename) {

var img = new Image();

img.setAttribute('crossOrigin', 'anonymous');

img.onload = function () {

var canvas = document.createElement("canvas");

canvas.width =this.width;

canvas.height =this.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(this, 0, 0);

var dataURL = canvas.toDataURL("image/png");

// alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));

$.post( "../ajax_camera_input/index.php",

{ filename: filename, picture: dataURL.replace(/^data:image\/(png|jpg);base64,/, "") },

function(response, status){

return response;

}

);

};

img.src = url;

}

</script>

<?php

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: