Exporting Peninput drawing Overlay to PDF

[jviernes]

Hi, 

I am trying to export a peninput that is on top of a picture of the human body. The idea is to draw on the body part that is impacted and then export that image to a PDF. The image and the peninput are two separate entities in the PowerApp. How do I get the image of the human body and the peninput drawing to export together on the PDF?

Attached is an example of drawing on top of the image. 

This is also part of a larger form with other medical data that will be exported to the same PDF. 

Any help would be awesome!

Thanks!

[rebeccas]

You can export the pen input into Flow using JSON and then figure out how you can use it from there. 

To save the pen input as an image you will build a Flow that is triggered by PowerApps and then have Create File -- SharePoint or OnDrive is what I used for this. The "File Name" and "File Content" will be pulled from PowerApps.

Then in PowerApps you have a button to click that Runs the Flow and have:

FlowName.Run("ImageName.jpg",

Mid(JSON(PenInput.Image, IncludeBinaryDate),24,

Len(JSON(PenInput.Image, IncludeBinaryDate)) - 24))

I usually use a variable of some sort for setting the "ImageName" so it has a unique value. 

[jviernes]

When you say "ImageName.jpg", that is the image of (in my case) the human body?

I have that image in PowerApps in an image in my PowerApp. Do I need the jpg loaded someone else as a reference so Flow will read it? Or can I reference the image as HumanBody.Image in my PowerApp?

Thanks! 

[rebeccas]

When I say "ImageName.jpg" - that is the image name you give for the Pen Input that is saving as an image. You can do Text(Now() & ".jpg") or something else...whatever you want for that. 

Hmm...I don't know if you can send an image that you have in PowerApps that u put in using the Media but I am almost positive you can not do that. I would suggest you save a copy of that human body image on SharePoint or something where it can be retrieved. 

There are a few ways you can combine those where you place the pen input over that image. You could do it using HTML or I like the Populate Word one....I have put signatures in it before on a document so I know it will allow you to do images. Shane has some videos on YouTube if you look him up on how to do the HTML option. I'm not sure right off which would be a better choice when wanting to lay one over the over.

[Anonymous]

@jviernes 

My first thought was that you need to merge the two images and I found this via a quick Google search. It seems to explain what you need to do?

https://poszytek.eu/en/microsoft-en/office-365-en/powerapps-en/sketch-noting-in-powerapps-and-mergin...

[jviernes · Accepted solution]

Thanks for all of the advise. 

I ended being able to export the file using this line of HTML. 

<p>

<img src=" & JSON(PenInput1.Image, JSONFormat.IgnoreBinaryData)&" >

</p>

To convert to PDF, I also used a Flow that converted the HTML to PDF.

I created an HTML file in Microsoft Power Automate using "Create File" action in OneDrive for Business. 

Then I used "Convert file using path" action to convert the HTML. 

And finally used "Create file" action again to store in SharePoint.

[Anonymous]

Nice job mate. This looks like something I could use in the not to distant future.

You should accept your answer as a solution so others can learn from what you've done here.

[sudeep22169]

Hi @jviernes ,

Thanks for the post . I am also in similar kind of situation. But seeing your post I am little bit confused. How are able to merge to images. All I can see in the code is you converted Peninput image to json string (<img src=" & JSON(PenInput1.Image, JSONFormat.IgnoreBinaryData)&" >)or am I missing something. Could you please explain.

[Scotty_]

Hi,

  how did you send image though html, everytime i do that i get a blank image in the html, where the image should be. Do you have to save the image file to a sharepoint / onedrive area as well to get the image to show in html ?, then convert that to PDF ?

thanks

[jviernes]

Hi @Scotty_ , 

You have to create an HTML file in OneDrive and then convert that to PDF. This can be done in Flow using the the create OneDrive FIle and Convert to PDF through OneDrive option.