cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Advocate I
Advocate I

Exporting Peninput drawing Overlay to PDF

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!

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted

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.

 

 

View solution in original post

10 REPLIES 10
Highlighted
Super User
Super User

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. 

 

Highlighted

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! 

Highlighted

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.

 

 

Highlighted
Super User II
Super User II

@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...

 

 

Highlighted

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.

 

 

View solution in original post

Highlighted

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.

Highlighted

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.

Highlighted

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

 

Highlighted

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. 

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Top Solution Authors
Top Kudoed Authors
Users online (8,071)