Showing results for 
Search instead for 
Did you mean: 

How to merge image objects in UI5

Former Member
0 Kudos


I created some image template like :

var imgTemplate1 = new sap.m.Image({




  return ('images/'+element+'.png');                    



  width: '50%',



Now I have a scenario where I need to combine and return two images as a single image. I would like to know any procedure to do the same.

Thanks & Regards

Buddha Puneeth

Accepted Solutions (0)

Answers (3)

Answers (3)

0 Kudos


There are a couple of ways to do this depending on the scenario:

  1. If it is a static image always comprised of the same images then it is easier to manually do the combination in Photoshop or Gimp
  2. Frontend implementation in JavaScript. Have a look at this thread on StackOverflow which gives a simple idea (canvas) or using the Pixastic open source image processing library which you could include alongside SAPUI5.
  3. Backend implementation - you mention HANA as your backend and this means the best way could be using server side JavaScript (XSJS). You could cannibalize parts of the Pixastic library that are required for your purposes.

Hope this gives you an idea.


Former Member
0 Kudos

Hi Buddha,

i would prefer a server side solution, too. You can try to put the code of the following post into a simple Java-Servlet: Merging two images using Java.

But there is also a solution in Javascript! Via HTML5 you can use the native Canvas 2D API to draw multiple images into one. Check out this example: Merge Image using JavaScript

Regards Michael

Former Member
0 Kudos

Hi Michael,

maybe a dumb question, but I want to know

How can I consume java-servlets using a SAP HANA appliance? I thought I could only use server side JS?

Or is this meant as a solution when using sapui5 in combination with another webserver?



Former Member
0 Kudos

Hi Ben,

sry, i am not familiar with SAP HANA.

The only thing i can say is, that the Servlet solution is usable in all kind of apps, where you can manually implement a HTTP-request (e.g. via JavaScript).

Regards Michael

Developer Advocate
Developer Advocate
0 Kudos

The SAPUI5 framework does a lot, but I don't think it stretches to image processing, which is what I'm understanding from your question. I'd suggest that you look into server side image processing libraries that would suit your backend environment.

Good luck!