Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Tui_image_editor added #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Tui_image_editor added #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,4 +105,5 @@ dist

/mta_archives

/app/*.zip
/app/*.zip
.vscode/launch.json
162 changes: 91 additions & 71 deletions app/profilePic/profilePic/controller/App.controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,92 +7,112 @@ sap.ui.define([
"sap/ui/core/Core",
"sap/ui/model/json/JSONModel",
"sap/ui/Device",
"sap/suite/ui/commons/library"
"sap/suite/ui/commons/library",
"sap/ui/dom/includeStylesheet",
"profilePic/tui/tui-image-editor"
],
function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary) {
function (BaseController, MessageToast, oCore, JSONModel, Device, SuiteLibrary,includeStylesheet,TuiImageEditor) {

return BaseController.extend("profilePic.controller.App", {
onInit: function () {
var oImageEditor = this.getView().byId("image"),
oModel = new JSONModel({
blocked: true
})
// var oImageEditor = this.getView().byId("image"),
// oModel = new JSONModel({
// blocked: true
// })

this.getView().setModel(oModel)
if (!Device.browser.msie) {
// svg files are not supported in Internet Explorer
oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg")
}
// this.getView().setModel(oModel)
// if (!Device.browser.msie) {
// // svg files are not supported in Internet Explorer
// oImageEditor.setCustomShapeSrc(sap.ui.require.toUrl("sap/suite/ui/commons/statusindicator") + "/shapes/bulb.svg")
// }
},

uploadPressed: async function (oEvent) {
let view = this.getView()
let controller = view.getController()
let oFileUploader = view.byId("fileToUpload")
if (!oFileUploader.getValue()) {
MessageToast.show("Choose a file first")
return
}
let param = view.byId("uploadParam")
//param.setValue(oInput.getActivePage())
oFileUploader.getParameters()
var oImageEditor = this.getView().byId("image")
oImageEditor.applyVisibleCrop()
console.log(oImageEditor.getMode())
oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) {
return new Promise(async (resolve, reject) => {
let newBlob = await oImageEditor.getImageAsBlob()
resolve([newBlob])
})
}
controller.startBusy()
oFileUploader.upload(true)
onAfterRendering: function() {
includeStylesheet(sap.ui.require.toUrl("profilePic/tui/tui-image-editor.css"));
this.editor = new TuiImageEditor(document.getElementById("editor"), {
includeUI: {
loadImage: {
path: 'profilePic/tui/ui5logo.png',
name: 'ui5logo',
},
initMenu: 'shape',
uiSize: {
height: '100%',
width: '100%',
},
},
cssMaxWidth: 700,
cssMaxHeight: 500,
});
},

uploadStart: async function (oEvent) {
let view = this.getView()
let controller = view.getController()
controller.startBusy()
},
// uploadPressed: async function (oEvent) {
// let view = this.getView()
// let controller = view.getController()
// let oFileUploader = view.byId("fileToUpload")
// if (!oFileUploader.getValue()) {
// MessageToast.show("Choose a file first")
// return
// }
// let param = view.byId("uploadParam")
// //param.setValue(oInput.getActivePage())
// oFileUploader.getParameters()
// var oImageEditor = this.getView().byId("image")
// oImageEditor.applyVisibleCrop()
// console.log(oImageEditor.getMode())
// oFileUploader.getProcessedBlobsFromArray = async function (oBlobs) {
// return new Promise(async (resolve, reject) => {
// let newBlob = await oImageEditor.getImageAsBlob()
// resolve([newBlob])
// })
// }
// controller.startBusy()
// oFileUploader.upload(true)
// },

uploadComplete: async function (oEvent) {
let view = this.getView()
let controller = view.getController()
let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw
let oImageEditor = view.byId("image")
await oImageEditor.setSrc(dataURL)
controller.endBusy(controller)
},
// uploadStart: async function (oEvent) {
// let view = this.getView()
// let controller = view.getController()
// controller.startBusy()
// },

onSaveAsPress: async function () {
let view = this.getView()
let controller = view.getController()
let oImageEditor = view.byId("image")
oImageEditor.openSaveDialog()
controller.openUrl('https://people.sap.com/', true)
// uploadComplete: async function (oEvent) {
// let view = this.getView()
// let controller = view.getController()
// let dataURL = "data:image/png;base64," + oEvent.getParameters().responseRaw
// let oImageEditor = view.byId("image")
// await oImageEditor.setSrc(dataURL)
// controller.endBusy(controller)
// },

},
onImageLoaded: async function (oEvent) {
let view = this.getView()
let oImageEditor = view.byId("image")
oImageEditor.zoomToFit()
oImageEditor.setCropAreaByRatio(1, 1)
oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse)
console.log(oImageEditor.getMode())
// onSaveAsPress: async function () {
// let view = this.getView()
// let controller = view.getController()
// let oImageEditor = view.byId("image")
// oImageEditor.openSaveDialog()
// controller.openUrl('https://people.sap.com/', true)

// },
// onImageLoaded: async function (oEvent) {
// let view = this.getView()
// let oImageEditor = view.byId("image")
// oImageEditor.zoomToFit()
// oImageEditor.setCropAreaByRatio(1, 1)
// oImageEditor.setMode(SuiteLibrary.ImageEditorMode.CropEllipse)
// console.log(oImageEditor.getMode())


},
onFileChange: async function (oEvent) {
var oFile = oEvent.getParameter("files")[0],
oImageEditor = this.getView().byId("image")
if (!oFile) {
return
}
this.getView().getModel().setProperty("/blocked", true)
await oImageEditor.setSrc(oFile)

}
// },
// onFileChange: async function (oEvent) {
// var oFile = oEvent.getParameter("files")[0],
// oImageEditor = this.getView().byId("image")
// if (!oFile) {
// return
// }
// this.getView().getModel().setProperty("/blocked", true)
// await oImageEditor.setSrc(oFile)

// }
})
}
)
7 changes: 7 additions & 0 deletions app/profilePic/profilePic/tui/tui-image-editor.css
View file
Open in desktop

Large diffs are not rendered by default.

51 changes: 51 additions & 0 deletions app/profilePic/profilePic/tui/tui-image-editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TUI Image Editor</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/1.99.0/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted"
data-sap-ui-language="en"
data-sap-ui-resourceroots='{"profilePic": "./",
"root": "./"}'
data-sap-ui-oninit="onInit()">
</script>
<script>
function onInit() {
let editor;
// let sTuiPath = sap.ui.require.toUrl("tui-image-editor");
sap.ui.require(["sap/ui/dom/includeStylesheet", "profilePic/tui-image-editor"], function(includeStylesheet, TuiImageEditor) {
includeStylesheet(sap.ui.require.toUrl("profilePic/tui-image-editor.css"));
editor = new TuiImageEditor(document.getElementById("editor"), {
includeUI: {
loadImage: {
path: 'ui5logo.png',
name: 'ui5logo',
},
initMenu: 'shape',
uiSize: {
height: '100%',
width: '100%',
},
},
cssMaxWidth: 700,
cssMaxHeight: 500,
});
})
}
</script>
<style>
html, body, div#editor {
height: 100%;
}
</style>
</head>
<body class="sapUiBody">
<div id="editor" class="tui-image-editor-container"></div>
</body>
</html>
Loading