Erstellen der Bildbearbeitung
Wie beim Erstellen der Drag and Drop Funktion wird auch bei der Bildbearbeitung für jedes HTML-Element eine Variable via .querySelector() erstellt die auf die jeweiligen HTML-Klasse
zugreift.
Codeausschnitt:
...
var actionButton = document.querySelectorAll('.actionButton');
var hiddenUpload = document.querySelector('.actionButton .hiddenupload');
var zoom = document.querySelectorAll('.side-control-page .zoom svg');
var rotate = document.querySelectorAll('.side-control-page .rotate svg');
var flip = document.querySelectorAll('.side-control-page .flip svg');
...
Beim Klick auf den Button “Bild auswählen” wird der lokale Ordner geöffnet und man wählt ein Bild. Dieses wird in die Variable file gespeichert. Über die Funktion createObjectUrl() wird ein
neues Blob (binary large object) erstellt das die Daten von file aufnimmt und den Formattyp .jpg anhängt. Die Variable url (kommend von createObjectUrl() ) wird dann an das Darstellungsfenster via dem .src-Attribut übergeben. Die Besonderheit ist, dass die URL nicht, wie
üblich, auf eine Datei zeigt, sondern allein in der URL alle Bilddaten mittels Base64-Kodierung gespeichert sind.
Codeausschnitt:
actionButton[0].onclick = function () {
hiddenUpload.click();
};
hiddenUpload.onchange = function () {
var file = hiddenUpload.files[0];
var url = window.URL.createObjectURL(new Blob([file], {type:
'image/jpg'});
show.src = url;
…Zur Nutzung von Bildbearbeitungsfunktionen wird die Bibliothek Cropper.js eines Drittanbieters
genutzt. Durch die Funktion Cropper() wird diese Initialisiert.
Codeausschnitt:
...
var additionalOptions = options;
var cropper = new Cropper(show, options);
...
Über diese Bibliothek greife ich dann via onclick-Ereignis auf Funktion wie cropper.rotate(), cropper.zoom(), cropper.scale(), cropper.clear(),
cropper.crop(), cropper.setDragMode(), cropper.getCroppedCanvas(),
und cropper.destroy() zu. Diese Funktionen werden den Variablen, die die jeweiligen dazugehörigen HTML-Elemente enthalten, zugeordnet.
Codeausschnitt:
...rotate[0].onclick = function (){
cropper.rotate(45);
};
rotate[1].onclick = function () {
cropper.rotate(-45);
};
var flipX = -1; var flipY = -1;
flip[0].onclick = function (){
cropper.scale(flipX, 1);
flipX -= flipX;
};
flip[1].onclick = function (){
cropper.scale(1, flipY);
flipY -= flipY;
};...Ein bearbeitetes Bild kann via Ajax (wie bereits in 5.1 beschrieben) auf den Buttonklick “Bild speichern” direkt in den Webordner hochgeladen werden.
Codeausschnitt:
...
var file = hiddenUpload.files[0];
var filename = file.name;
actionButton[1].onclick = function (){
cropper.getCroppedCanvas().toBlob(function (blob){
var newBlob = new File([blob], `cropped ${filename}`,{
type: 'image/jpg'});
var formData = new FormData();
formData.append('croppedImage', newBlob);
...
Über den zwischenspeichern Button wieder in die Darstellung geladen werden. Hierzu wird mit cropper.destroy() die Aktuelle Bearbeitung beendet und ein neuer Cropper geladen.
Codeausschnitt:
cache.onclick = function (){
var imgSrc = cropper.getCroppedCanvas({
width: $(".cropper-crop-box").width(),
height: $(".cropper-crop-box").height()
}).toDataURL();
cropper.destroy();
show = document.querySelector('.show img');
show.src = imgSrc;
cropper = new Cropper(show, additionalOptions);
};
