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.
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.
Für dieses Tutorial sollten Sie bereits wissen, wie Sie Anwendungen erstellen, Widget-Eigenschaften im UI-Designer festlegen, Daten von Business Objekten im Prozess-Designer auf Widgets zuordnen, Business Objekte erstellen und globale Variablen erstellen. Wenn Ihnen das gar 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 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:
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.
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:
Gehen Sie zur Data Workbench und erstellen Sie zwei globale Variablen vom Typ ‘String’:
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 Client-Side Business Object (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:
Den Code für die Funktionen finden Sie hier:
// 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.");
}
// 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);
// 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();
}
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:
Zu guter Letzt müssen wir noch einige Sicherheitsanpassungen vornehmen, denn das Hochladen eines Bildes mit dem FileUploader erfordert eine spezielle Berechtigung für die Benutzer.
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
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.
