on 12-10-2018 2:06 PM
Hi,
I am trying to draw shapes on a image canvas and display it on UI5 view. However, the image.onload is not working.
For canvas to have drawImage with image to work it requires the image's load function. Please help me with this.
Alternatively, I have tried using the image constructor class with json body and initialised the image.load and that too is not working. I have tried using filereader.
Please find attached sample expected output:
and wrong output i am getting
images that i am gettting.
Please help.
controller.js:
fileUploadComplete: function(oControlEvent) {
var response = {
"detection_boxes": [
[
0.44216591119766235,
0.3235298991203308,
0.7293341755867004,
0.6824579834938049
]
],
"detection_classes": [
"X"
],
"detection_scores": [
0.9998396635055542
],
"num_detections": 1
};
// get the current view
var oView = this.getView();
var service = "imageclassifier";
// clear previous results from the model
oView.getModel("demo").setProperty("/result-" + service, null);
oView.getModel("demo").setProperty("/resultVisible-" + service, false);
var srcFileIsImage = this.srcFile.type.match('image.*');
var fontSize = 14;
var oCanvas = null;
//var oImage = this.byId("RESPONSE");
var drawCanvas = function (oController) {
console.log(3);
oCanvas = document.createElement("canvas");
var ctx = oCanvas.getContext("2d");
var oImage = new Image();
var FR= new FileReader();
FR.onload = function(e) {
//oImage.onLoad = function(){
console.log(3.1);
oCanvas.width = oImage.width;
oCanvas.height = oImage.height;
//ctx.drawImage(oImage, 0, 0);
ctx.drawImage(oImage, 0, 0, oCanvas.width, oCanvas.height);
ctx.lineWidth="3";
ctx.strokeStyle="red";
ctx.fillStyle = "white";
ctx.font = fontSize + "px Arial";
//};
};
oImage.src = oController.srcFileURL;
FR.readAsDataURL(oController.srcFile);
console.log(oCanvas.toDataURL('image/png'));
console.log(oImage);
//oImg.style.display = "none";
return ctx;
};
var drawBoundingBox = function (ctx, imageId, item, text) {
// var oCanvas = document.getElementById("OUTPUT");
console.log(4);
// get the box attributes
var left = item[1] * oCanvas.width ;
var top = item[0] * oCanvas.height ;
var width = (item[3] * oCanvas.width - item[1] * oCanvas.width );
var height = (item[2] * oCanvas.height - item[0] * oCanvas.height );
// draw the box
ctx.strokeRect(left, top, width, height);
// write the text with the box angle
ctx.save();
ctx.fillStyle = 'red';
ctx.fillRect(left, top, ctx.measureText(text).width + ctx.lineWidth, ctx.lineWidth + fontSize);
// write the text in the box
ctx.fillStyle = "white";
ctx.fillText(text, left, top + fontSize);
ctx.restore();
console.log(oCanvas.toDataURL('image/png'));
};
var processResult1 = function(oController, response1, fileName, url) {
// set the image urls to default if part of a zip
var newJson = JSON.parse('{"predictions":[{}]}');
if (srcFileIsImage) {
console.log(1);
console.log(oController);
var ctx = drawCanvas(oController);
for (var i = 0; i < response.detection_boxes.length; i++) {
var text = "#" + i + ": " + response.detection_classes[i] + " " + ( response.detection_scores[i] * 100 ).toFixed(2) + "%";
drawBoundingBox(ctx, name, response.detection_boxes[i], text);
}
newJson.predictions[0].fileURLResponse = oCanvas.toDataURL('image/png');
if (srcFileIsImage) {
newJson.predictions[0].fileURL =URL.createObjectURL(oController.srcFile);
}
}
var result = oController.getView().getModel("demo").getProperty("/result-" + service);
if(result){
result.push.apply(result, newJson.predictions);
}else{
result = newJson;
console.log(newJson);
result = newJson.predictions;
}
oController.getView().getModel("demo").setProperty("/result-" + service, result);
// display the result table
oController.getView().getModel("demo").setProperty("/resultVisible-" + service, true);
};
if (oControlEvent.getParameters().status === 200) {
// get the response as JSON and process the results
processResult1(this, response, this.srcFile.name, this.srcFileURL);
} else {
oView.getModel("demo").setProperty("/resultVisible", false);
MessageBox.show("Error " + oControlEvent.getParameters().status + " : " +oControlEvent.getParameters().responseRaw+" : "+JSON.parse(oControlEvent.getParameters().responseRaw).error_description);
}
this.oBusyIndicator.close();
MessageBox.show("Process completed!\n Target URL: " + oView.getModel("demo").getProperty("/url"));
},
view.js:
<mvc:View xmlns:mvc="sap.ui.core.mvc" xmlns:table="sap.ui.table" xmlns:unified="sap.ui.unified" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:core="sap.ui.core" xmlns="sap.m"
xmlns:custom="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1" controllerName="sapui5ml.controller.demo"
displayBlock="true">
<App>
<pages>
<Page title="Human Detection">
<content>
<Carousel pages="{demo>/result-imageclassifier}" width="100%" visible="{= ${demo>/resultVisible-imageclassifier} === true}">
<pages>
<ScrollContainer height="100%" width="100%" horizontal="true" vertical="true" focusable="true">
<VBox width="100%" direction="Column" alignItems="Center">
<Image tooltip="canvas" class="sapUiLargeMargin" src="{demo>fileURL}" width="" height =""/>
<Image tooltip="canvas" id="RESPONSE" class="sapUiLargeMargin" src="{demo>fileURLResponse}"/>
</VBox>
</ScrollContainer>
</pages>
</Carousel>
</content>
<footer>
<Toolbar width="100%">
<content>
<unified:FileUploader buttonOnly="true" buttonText="Upload Picture" sameFilenameAllowed="true" multiple="false" fileType="zip,png,jpeg,jpg,bmp,tiff,tif" mimeType="application/x-zip-compressed,application/zip,application/octet-stream,image/png,image/jpg,image/jpeg,image/bmp,image/tiff" typeMissmatch="fileTypeMissmatch" change="fileUploadChange" uploadStart="fileUploadStart" uploadComplete="fileUploadComplete" name="file" uploadUrl="{demo>/url}" useMultipart="true" sendXHR="true" uploadOnChange="true">
<unified:headerParameters>
<unified:FileUploaderParameter name="APIKey" value="{demo>/APIKey}"/>
<unified:FileUploaderParameter name="Accept" value="application/json"/>
</unified:headerParameters>
</unified:FileUploader>
</content>
</Toolbar>
</footer>
</Page>
</pages>
</App>
</mvc:View>
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.