cancel
Showing results for 
Search instead for 
Did you mean: 

Show Ui5 canvas with image on View

0 Kudos

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>


former_member560141
Participant

I have not read all your code, but if you want a event listener on a img you can do some vanilla javascript or jquery

in the onAfterRendering you can do something like

Vanilla
var img = document.querySelector('img')

img.addEventListener('load', function(){alert("Loaded")});
img.addEventListener('error', function() { alert('error') }); Jquery
$('img') .load(function(){ alert('Image is loaded!'); }) .error(function(){ alert('Image is not loaded!'); });




0 Kudos

Thanks Nicholas. My problem was i am using sap.m.Image which has a load event. Shouldnt that work ideally in this case?

Accepted Solutions (0)

Answers (0)