How Power Apps, will help Merging of Pen Input and Camera/Upload Images?

How Power Apps can help merging of Pen Input Camera/Upload images. In this blog, we will discuss a case when someone has a requirement such as to take a photo (either from camera/upload image), then sketch it using pen input and finally save both the images as a single one using Power Apps. Even saved images (which are already sketched) can be sketched repeatedly if required.

Required Components: 

1. Power Apps: Take Camera/ upload photo and then sketch on it using Pen input. 

2. Flow: To upload Pen input image and Camera/upload image, as well as uploading final resultant image. 

3. Convert API: To convert html image into PNG file. 

Solution 

Power Apps: 

1. Take a picture from camera/Local. 

2. Overlap Pen Input on taken picture and edit it accordingly then save it. 

3. On Save, flow will trigger. 

4. Take below image as reference. 

5. Code reference from PowerApps 

‘Merge-Images’.Run( 

Substitute(JSON(EditPicture.Image,JSONFormat.IncludeBinaryData),””””,””), 

Substitute(JSON(Image3.Image,JSONFormat.IncludeBinaryData),””””,””), 

Image3.Height,
Image3.Width, 

EditPicture.Width, 

EditPicture.Height 

); 

Flow: 

 Pass all the variables from Power Apps.

Below are the remaining actions. Let’s explore one by one.

HTML Image Contents:  Its variable  

Register on Convertapi.com to get the secret token

Generate html file two merge both the images like below
Here is Code reference: 

 

 

Use HTTP action to convert HTML to PNG. Find the detailed explanation below.

Method: Post
URI: https://v2.convertapi.com/convert/html/to/png?{ConvertAPI_Token}
Headers:  {“Content-Type”: “application/json”}
Body:
{ 

  “Parameters”: [ 

{ 

  “Name”: “File”, 

  “FileValue”: { 

“Name”: “markedPhoto.html”, 

“Data”: “@{variables(‘var_ImageHTML_Txt’)}” 

  } 

}, 

{ 

  “Name”: “StoreFile”, 

  “Value”: false 

}, 

{ 

  “Name”: “FileName”, 

  “Value”: “markedPhoto” 

}, 

{ 

  “Name”: “CropWidth”, 

  “Value”: “@{variables(‘ImageWIdth’)}” 

}, 

{ 

  “Name”: “CropHeight”, 

  “Value”: “551” 

} 

  ] 

}
  

Parse the json which receives from above HTTP action

Finally Create the file. 
File Content:     dataUriToBinary(concat(‘data:image/png;base64,’,body(‘Parse_Conversion_Body’)?[‘Files’][0][‘FileData’])) 

Finally, one will get the result like below

–—-

Written by Anusha Tottadi.

Anusha is Microsoft 365 Developer at Evolvous Limited – specialists in Microsoft Technologies.