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

Merging a Photo Image and a Pen Input Image using Flow and API

Hi,

 

The app I'm currently building in PowerApps utilizes a camera and pen input function, where in essentially you take a picture and you're then given the option to draw on said picture using the Pen Input function so as to add notes, annotations, etc. At the moment I have it so that when the picture is taken and the notes are added, both are added to Azure Storage as two separate images, and what I'm trying to do is merge them using a Flow, which receives all the information about the images, and then uses HTTP call to a free API called 'Convert API' to join them together.

 

Below is my Flow as it currently is:

 

One.png

 

Two.png

 

Three.png

 

Four.png

 

Five.png

 

Six.png

 

 

 

For the most part it runs smoothly, however when it reaches the HTTP step, it fails with the below error:

 

"{"Code":4002,"Message":"Bad JSon format. The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters. "}"

 

Seven.png

 

I'm thinking that the error is possibly coming from the HTML input that gets passed along, specifically the "data:image/png;base64," header, but I'm not 100% sure, and if it is that how would I go about removing it?

 

Eight.png

 

 

Any help would be appreciated - Thank you!

 

 

 

 

5 REPLIES 5
Highlighted
Microsoft
Microsoft

Re: Merging a Photo Image and a Pen Input Image using Flow and API

@Guero 

 

I think the issue here is with the additional source path that is being added.

 

Regarding the source path that you are getting in the content output, that is coming from the azure output where the data is being stored once you convert the data into base64() format you will get that source path added.

 

You can use the formula Mid(base64() value of the image, 24,Len(base64() value of the image) - 24)

Use this formula to get rid of the extra path information.

 

If this information helps you, please hit the like button and mark the solution as resolved, so that it will help other users in future.

 

Highlighted
Helper I
Helper I

Re: Merging a Photo Image and a Pen Input Image using Flow and API

@Krishna92 

Thanks for the response - I'll give it a shot! Whereabouts in the Flow would I put the Mid formula? Would it be in it's own action entirely? Sorry if this is a stupid question, I'm not particularly adept at Flow or Powerapps!

 

Highlighted
Microsoft
Microsoft

Re: Merging a Photo Image and a Pen Input Image using Flow and API

@Guero 

 

You can put it in the place where you are converting the Azure Blob storage value to a Json data.

This will extract the path from that Json data.

The best idea in this scenario will be to declare a variable in flow of type string/json.

Store the Image Json data in the variable.

Then apply the mid() formula on output of that variable.

Mid(Output of variable, 24,Len(Output of variable) - 24)

 

 

Highlighted
Frequent Visitor

Re: Merging a Photo Image and a Pen Input Image using Flow and API

@Krishna92 

Thankyou for your assistance so far - as advised I've now stored the data in a variable and used the mid() formula on it, which when looking at my output now appears to have removed the extra path information, however the Flow is still failing and I'm still getting the same message as before:

"{"Code":4002,"Message":"Bad JSon format. The input is not a valid Base-64 string as it contains a non-base 64 character, more than two padding characters, or an illegal character among the padding characters. "}" 

 

There must be a junk character in there somewhere, but I'm having no luck finding it:

 

436343736.png

 

The only other thing that's occurred to me that could possibly be incorrect is the ImageHTML variable I've got in the Flow, and whether the DataURI Expressions I'm using are causing an issue:

 

7343734633.png

 

 If you have any input I'd be most appreciative.

 

 

 

Helper I
Helper I

Re: Merging a Photo Image and a Pen Input Image using Flow and API

@Krishna92 

Further to my last post, I've tested sending the Photo and Drawing variables separately to the API and both have been successful, so as I see it there's no issue with the base64 of the images themselves.



HTTP.png

 

HTTP2.png

 


In which case, I think the issue comes down to my writeup of the ImageHTML variable, which includes both the Photo and Drawing variables (base64 makeup of both images) and the sizing information.

 

ImageHTML.png

 

HTTP3.png

 HTTP4.png

 

 

Helpful resources

Announcements
FirstImage

Microsoft Ignite 2020

Check out the announcement of Power Platform content at Microsoft Ignite!

thirdImage

Experience what's new for Power Automate

Join us for an in-depth look at the new Power Automate features and capabilities at the free Microsoft Business Applications Launch Event.

firstImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Top Solution Authors
Top Kudoed Authors
Users online (10,585)