Author Details

avatar-teacher

Anusha Tottadi

We are a team of tech enthusiast and this section is where we love to share our experience and our knowledge. We try our best to help you understand technical topics by giving you live instances of how-to’s, guides, tips, FAQ’s and troubleshoots.

If you like it or have questions, do share your feedback in the comments section below.

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 PNGFind 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 Limitedspecialists in Microsoft Technologies.