Zeichnen auf Bildern mit dem SignaturePad-Widget

Written by Jennifer Häfner
Juli 24, 2024

In diesem Artikel erfahren Sie, wie Sie das SignaturePad-Widget verwenden, um auf Bildern zu zeichnen.
Darüber hinaus behandeln wir, wie Sie ein Bild in den Browser hochladen und wie Sie das bearbeitete Bild auf Ihren Computer herunterladen.

Sie können die Beispielanwendung, die wir in diesem Artikel beschreiben , auf dem Simplifier-Marktplatz herunterladen.

Voraussetzungen

Für dieses Tutorial sollten Sie bereits wissen, wie Sie Anwendungen erstellen, Widget-Eigenschaften im UI-Designer festlegen, Daten von Business Objekten auf Widgets im Prozess-Designer zuordnen, Business Objekte erstellen und globale Variablen erstellen.
Wenn Ihnen das überhaupt nicht bekannt vorkommt: Erfahren Sie, wie Sie eine Anwendung erstellen und lesen Sie über die grundlegenden Konzepte (UI Designer, Process Designer, Business Objects, Globale Variablen).

Das SignaturePad-Widget

Das SignaturePad ist ein Widget, mit dem Sie auf einem Bildschirmbereich zeichnen/schreiben können.
Sie können die Farbe und die Größe des Stifts ändern.
Es gibt zwei gängige Anwendungsfälle für das SignaturePad:

  • Ein digitales Formular, mit dem Benutzer die von ihnen eingegebenen Informationen digital signieren können
  • Zeichnen/Schreiben auf Bildern, um wichtige Details hervorzuheben oder Anmerkungen zu machen

In diesem Artikel werden wir eine Anwendung für den zweiten Anwendungsfall erstellen.
Die Benutzer können ein Bild von ihrem Computer hochladen, auf dem Bild zeichnen und dann das bearbeitete Bild herunterladen.

Schritt 1: Erstellen der Benutzeroberfläche

In diesem Schritt erkläre ich die wichtigsten Elemente, die Sie benötigen, um die Funktionalität der Anwendung zu implementieren.
Selbstverständlich können Sie das UI an Ihre Bedürfnisse anpassen, Layouts und zusätzliche Elemente hinzufügen, wie wir es in der Beispielanwendung auf unserem Marktplatz getan haben:

Die wichtigsten Elemente, die Sie im UI-Designer konfigurieren müssen, sind:

  • Ein “ui_unified_FileUploader“-Widget zum Hochladen eines Bildes
    • Eigenschaften:
      • ‘sameFilenameAllowed’: wahr
      • ‘uploadOnChange’: wahr
      • ‘useMultipart’: falsch
      • ‘mimeType’: ‘image/png, image/jpeg’ (geben Sie diese Werte ohne Anführungszeichen, aber mit dem Komma in das Eingabefeld ein)
      • ‘Breite’: 100%
  • Ein “Bild“-Widget zur Anzeige des hochgeladenen Bildes
    • Eigenschaften:
      • ‘Breite’: 100%
  • Ein “Button“-Widget zum Aktivieren der Bildbearbeitung
    • Eigenschaften:
      • ‘icon’: sap-icon://edit
      • ‘text’: Auf Bild zeichnen
      • ‘Breite’: 100%
  • Ein “SignaturePad“-Widget, in dem Sie auf dem Bild zeichnen können
    • Eigenschaften:
      • “dotSize”: Passen Sie sich Ihren Bedürfnissen an
      • ‘penColor’: Passen Sie sich Ihren Bedürfnissen an.
        Sie können HTML-Farbnamen, Hex-Farbcodes oder RGB-Werte (https://htmlcolorcodes.com/) verwenden.
  • Ein “Button“-Widget zum Herunterladen des bearbeiteten Bildes
    • Eigenschaften:
      • ‘icon’: sap-icon://save
      • ‘text’: Speichern Sie das bearbeitete Bild
      • ‘Breite’: 100%

Schritt 2: Erstellen der globalen Variablen

Gehen Sie zur Data Workbench und erstellen Sie zwei globale Variablen vom Typ ‘String’:

  • sFileName , um den Namen des hochgeladenen Bildes zu speichern
  • sFileType zum Speichern des Typs des hochgeladenen Bildes

Schritt 3: Erstellen der clientseitigen Business-Objekt-Funktionen

Für diesen Anwendungsfall müssen Sie Code verwenden, um das Bild hochzuladen, das Bild im SignaturePad anzuzeigen und das bearbeitete Bild herunterzuladen.
Sie können entweder Skripte im Prozess-Designer verwenden und Ihren Code dort ablegen, oder Sie können ein clientseitiges Business Objekt (CSBO) erstellen, wenn Sie den Code in verschiedenen Anwendungen wiederverwenden möchten.
Für dieses Beispiel habe ich das CSBO ‘SignaturePad’ (das auch in dem Beispiel enthalten ist, das Sie auf unserem Marktplatz herunterladen können) mit den folgenden Funktionen erstellt:

  • upload-Datei
    • Eingabeparameter:
      • uploaderId (String): die ID des FileUploader-Widgets mit Bildschirmname, z. B. “Dashboard–FileUploader”
    • Ausgabe-Parameter:
      • fileURL (String): die URL des hochgeladenen Bildes
      • fileName (String): der Name des hochgeladenen Bildes
      • fileType (String): der Typ des hochgeladenen Bildes
  • editImageInSignaturePad
    • Eingabeparameter:
      • signaturePadId (String): die ID des SignaturePad-Widgets mit Bildschirmname, z. B. “Dashboard–SignaturePad”
      • uploadedImageId (String): die ID des Bild-Widgets, in dem das hochgeladene Bild mit dem Bildschirmnamen angezeigt wird
    • Ausgabeparameter: Keine
  • saveImageOnComputer
    • Eingabeparameter:
      • signaturePadId (String): die ID des SignaturePad-Widgets mit Bildschirmname, z. B. “Dashboard–SignaturePad”
      • fileName (String): der Name des hochgeladenen Bildes
      • fileType (String): der Typ des hochgeladenen Bildes
    • Ausgabeparameter: Keine

Den Code für die Funktionen finden Sie hier:

upload-Datei

// upload the image to the browser

var oUploader =sap.ui.getCore().byId(oPayload.uploaderId);

if (oUploader.getValue() !== "") {
    var aFiles = oUploader.oFileUpload.files;
    if (aFiles.length === 1) {
        var oFile = aFiles[0];

        const readUploadedFile = (oFile) => {
            const temporaryFileReader = new FileReader();

            return new Promise((resolve, reject) => {
                temporaryFileReader.onerror = () => {
                    temporaryFileReader.abort();
                    reject(new DOMException("Problem parsing input file."));
                };

                temporaryFileReader.onload = () => {
                    resolve(temporaryFileReader.result);
                };
                temporaryFileReader.readAsDataURL(oFile);
            });
        };
        var lo_promise = readUploadedFile(oFile);
        lo_promise.then(
            function(oResult) {
                fnSuccess({
                    fileURL: oResult,
                    fileName: oFile.name,
                    fileType: oFile.type
                });
            });
    }
} else {
    fnError("Please select a file.");
}

editImageInSignaturePad

// show uploaded image as background of the signature pad

var oUploadedImage = sap.ui.getCore().byId(oPayload.uploadedImageId),
    sFileURL = oUploadedImage.getSrc(),
    oSignaturePad = sap.ui.getCore().byId(oPayload.signaturePadId),
    iHeight = document.getElementById(oUploadedImage.getId()).height,
    iWidth = document.getElementById(oUploadedImage.getId()).width;

oSignaturePad.setHeight(iHeight + "px");
oSignaturePad.setWidth(iWidth + "px");

setTimeout(function() {
    var oCanvas = document.getElementById(oSignaturePad.getId() + "--canvas");
    var oContext = oCanvas.getContext("2d");
    var oTempImage = new Image(iWidth, iHeight);
    oTempImage.src = sFileURL;
    // This fixes the problem with the image not showing up in the canvas
    oTempImage.onload = function() {
        oContext.drawImage(oTempImage, 0, 0, iWidth, iHeight);
        fnSuccess({});
    };
}, 10);

saveImageOnComputer

// save the edited image on the computer

var oCanvas = document.getElementById(oPayload.signaturePadId + "--canvas"),
    sFileName = oPayload.fileName,
    sFileType = oPayload.fileType;

oCanvas.toBlob(function(oBlob) {
    fn_saveAs(oBlob, sFileName);
    fnSuccess({});
}, sFileType, 1);

function fn_saveAs(oBlob, sFileName){
    var a = document.createElement("a");
    a.style = "display: none";
    document.body.appendChild(a);
    a.href = URL.createObjectURL(oBlob);
    a.download = sFileName;
    a.click();
    a.remove(); 
}

Schritt 4: Konfigurieren des Prozesses

Wir müssen nun die Logik hinter dem Upload-/Bearbeiten-/Download-Prozess im Process Designer konfigurieren.
Erstellen Sie eine neue Story oder öffnen Sie eine vorhandene.
Sie müssen 3 Prozesse konfigurieren:

  • Laden Sie ein Bild hoch:
    • Abonnieren Sie das “change”-Ereignis des FileUploaders
    • Verbinden Sie das Ereignis mit dem CSBO ‘SignaturePad’ – ‘uploadFile’
    • Ordnen Sie die Eingabeparameter zu:
      • ‘uploaderId’ = eine String-Konstante mit der ID des FileUploader-Widgets mit Bildschirmname, z.B. “Dashboard–FileUploader”
    • Ordnen Sie die Ausgabeparameter zu:
      • ‘fileName’ = die globale Variable ‘sFileName’
      • ‘fileType’ = die globale Variable ‘sFileType’
      • ‘fileURL’ = füge eine ‘Widget’ Form hinzu, wähle das Bild-Widget aus, in dem das hochgeladene Bild angezeigt werden soll, wähle die Eigenschaft ‘src’
  • Bearbeiten Sie das Bild:
    • Abonnieren Sie das “press”-Event des Edit Button-Events
    • Verbinden des Ereignisses mit dem CSBO ‘SignaturePad’ – ‘editImageInSignaturePad’
    • Ordnen Sie die Eingabeparameter zu:
      • ‘signaturePadId’ = eine String-Konstante mit der ID des SignaturePad-Widgets mit Bildschirmname, z.B. “Dashboard–SignaturePad”
      • ‘uploadedImageId’ = eine String-Konstante mit der ID des Bild-Widgets, in dem das hochgeladene Bild mit dem Bildschirmnamen angezeigt wird, z.B. “Dashboard–UploadedImage”
  • Laden Sie das bearbeitete Bild herunter:
    • Abonnieren Sie das Ereignis “press” des Save Buttons
    • Verbinden des Ereignisses mit dem CSBO ‘SignaturePad’ – ‘saveImageOnComputer’
    • Ordnen Sie die Eingabeparameter zu:
      • ‘fileName’ = die globale Variable ‘sFileName’
      • ‘fileType’ = die globale Variable ‘sFileType’
      • ‘signaturePadId’ = eine String-Konstante mit der ID des SignaturePad-Widgets mit Bildschirmname, z.B. “Dashboard–SignaturePad”

Schritt 5: Passen Sie die Sicherheitseinstellungen an

Zu guter Letzt müssen wir noch einige Sicherheitsanpassungen vornehmen, denn das Hochladen eines Bildes mit dem FileUploader setzt voraus, dass die Benutzer eine spezielle Berechtigung haben.

Hinzufügen/Bearbeiten einer Rolle in der Simplifier-Admin-Benutzeroberfläche

Hinweis: Um diesen Schritt ausführen zu können, muss Ihr Benutzer über die Berechtigung zum Bearbeiten von Rollen in der Simplifier-Admin-Benutzeroberfläche verfügen.
Bitten Sie Ihren Simplifier-Administrator, Ihnen die Berechtigung zu erteilen oder diesen Schritt für Sie auszuführen

  • Klicken Sie in der Simplifier-Admin-Benutzeroberfläche auf das Hamburger-Menü (die 3 horizontalen Linien in der oberen linken Ecke) und wählen Sie den Menüpunkt “Benutzer”
  • Wechseln Sie zum Reiter ‘Rollen’
  • Wählen Sie die Rolle aus, die Sie für die Anwendung bearbeiten möchten, oder erstellen Sie eine neue, klicken Sie auf die Schaltfläche “Bearbeiten” oder doppelklicken Sie auf die Rolle
  • Fügen Sie der Rolle die Berechtigung “Uploader” hinzu und speichern Sie

Fügen Sie der Anwendung die bearbeitete Rolle hinzu

  • Öffnen Sie Ihre Anwendung, klicken Sie auf die Registerkarte “Andere” und wählen Sie dann den Punkt “Sicherheit”
  • Aktivieren Sie das Kontrollkästchen “Anonyme Benutzer zulassen”.
  • Fügen Sie die Rolle hinzu, der Sie die Berechtigung für den Uploader hinzugefügt haben

Schritt 6: Bereitstellen der Anwendung

Stellen Sie nun die Anwendung bereit und öffnen Sie sie.
Sie sollten in der Lage sein, Bilder hochzuladen, sie im SignaturePad zu bearbeiten und auf Ihren Computer herunterzuladen.

Tags:

Was this article helpful?

 
Related Articles

Didn't find your answer? Contact Us