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

[Guero]

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:

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. "}"

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?

Any help would be appreciated - Thank you!

[Krishna92]

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

[Guero]

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

[Krishna92]

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

[WhiskeyClone]

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

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:

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

[Guero]

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

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.

 

[maneesha]

Can anyone helps me how to make pen drawing on captured camera photo. I have been looking into this for the last few days.

[SL93]

I know my answer is about 3 years late, but anyways: You were using double quotes in your HTML, which would not work in a JSON, since it is recognised as end of string. If you want to do anything like this in future use single quotes in HTML, so they don't interfere with the JSON.

[MLe92]

Hi together,

here is my Solution with SVG to Merge Images without Flow/Third parts or Code-Components.

— It's a Component with Pen Input and Background

GitHub - mlnc21/PowerApps-SVG-Merge-Modul: Merge Images in PowerApps without Flow or Code Components

If this post helps you give a 👍 and if it solved your issue consider Accept it as the solution to help the other members find it more.

[ShannonC]

Hi there,

I tried your component, it seems to only contain the edit bit though - missing the "Change Background" and "Merge Output Image" parts your Github screenshots show - am I doing something wrong?

[MLe92]

Hi @ShannonC , 

I will Update the Readme.

You can usw the zip File to import as Canvas App. Then you can Show my properties.