cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Guero
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!

 

 

 

 

10 REPLIES 10
Krishna92
Microsoft
Microsoft

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

 

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

 

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

 

 

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

 

 

 

@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

 

 

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
Frequent Visitor

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
Frequent Visitor

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.

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?

Hi @ShannonC , 

I will Update the Readme.

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

Helpful resources

Announcements

Power Platform Connections - Episode 6 | March 23, 2023

Episode Six of Power Platform Connections sees David Warner and Hugo Bernier talk to talk to Business Applications MVP Shane Young, alongside the latest news, product updates, and community blogs.    Use the hashtag #PowerPlatformConnects on social media for a chance to have your work featured on the show!        Show schedule in this episode:  0:00 Cold Open 00:24 Show Intro 01:02 Shane Young Interview 22:00 Blogs & Articles 22:20 Integrate FullCalendar.io with Power Pages 23:50 Text Data 25:15 Zero to Hero Power Apps Saga 25:44 Parent Hub Association 26:33 Using Custom Values for OneNote Power Automate References​ 28:04 ​Dynamics Power Israel 28:44 Create Beautiful Canvas Apps in Dataverse for Teams ​ 30:36 Outro & Bloopers  Check out the blogs and articles featured in this week’s episode:   https://francomusso.com/integrate-fullcalendar-io-with-power-pages-from-json-basics-to-advanced-outp... @crmbizcoach https://yerawizardcat.com/text/ @YerAWizardCat www.fromzerotoheroes.com/mentorship ​ @thevictordantas https://www.expiscornovus.com/2023/03/16/parent-hub-association/ ​ @Expiscornovus https://lindsaytshelton.com/2023/03/15/the-painful-process-of-custom-values-for-onenote-power-automa... @lshelton_Tech https://never-stop-learning.de/create-beautiful-canvas-apps-in-dataverse-for-teams/ @MMe2K    Action requested: Feel free to provide feedback on how we can make our community more inclusive and diverse.  This episode premiered live on our YouTube at 12pm PST on Thursday 23rd March 2023.  Video series available at Power Platform Community YouTube channel.    Upcoming events:  Business Applications Launch – April 4th – Free and Virtual! M365 Conference - May 1-5th - Las Vegas Power Apps Developers Summit – May 19-20th - London European Power Platform conference – Jun. 20-22nd - Dublin Microsoft Power Platform Conference – Oct. 3-5th - Las Vegas  Join our Communities:  Power Apps Community Power Automate Community Power Virtual Agents Community Power Pages Community  If you’d like to hear from a specific community member in an upcoming recording and/or have specific questions for the Power Platform Connections team, please let us know. We will do our best to address all your requests or questions.   

Announcing | Super Users - 2023 Season 1

Super Users – 2023 Season 1    We are excited to kick off the Power Users Super User Program for 2023 - Season 1.  The Power Platform Super Users have done an amazing job in keeping the Power Platform communities helpful, accurate and responsive. We would like to send these amazing folks a big THANK YOU for their efforts.      Super User Season 1 | Contributions July 1, 2022 – December 31, 2022  Super User Season 2 | Contributions January 1, 2023 – June 30, 2023    Curious what a Super User is? Super Users are especially active community members who are eager to help others with their community questions. There are 2 Super User seasons in a year, and we monitor the community for new potential Super Users at the end of each season. Super Users are recognized in the community with both a rank name and icon next to their username, and a seasonal badge on their profile.    Power Apps  Power Automate  Power Virtual Agents  Power Pages  Pstork1*  Pstork1*  Pstork1*  OliverRodrigues  BCBuizer  Expiscornovus*  Expiscornovus*  ragavanrajan  AhmedSalih  grantjenkins  renatoromao    Mira_Ghaly*  Mira_Ghaly*      Sundeep_Malik*  Sundeep_Malik*      SudeepGhatakNZ*  SudeepGhatakNZ*      StretchFredrik*  StretchFredrik*      365-Assist*  365-Assist*      cha_cha  ekarim2020      timl  Hardesh15      iAm_ManCat  annajhaveri      SebS  Rhiassuring      LaurensM  abm      TheRobRush  Ankesh_49      WiZey  lbendlin      Nogueira1306  Kaif_Siddique      victorcp  RobElliott      dpoggemann  srduval      SBax  CFernandes      Roverandom  schwibach      Akser  CraigStewart      PowerRanger  MichaelAnnis      subsguts  David_MA      EricRegnier  edgonzales      zmansuri  GeorgiosG      ChrisPiasecki  ryule      AmDev  fchopo      phipps0218  tom_riha      theapurva  takolota     Akash17  momlo     BCLS776  Shuvam-rpa     rampprakash   ScottShearer     Rusk   ChristianAbata     cchannon   Koen5     a33ik        AaronKnox        Matren        Alex_10        Jeff_Thorpe        poweractivate        Ramole        DianaBirkelbach        DavidZoon        AJ_Z        PriyankaGeethik        BrianS        StalinPonnusamy        HamidBee        CNT        Anonymous_Hippo        Anchov        KeithAtherton        alaabitar        Tolu_Victor        KRider        sperry1625        IPC_ahaas      zuurg     rubin_boer     cwebb365       If an * is at the end of a user's name this means they are a Multi Super User, in more than one community. Please note this is not the final list, as we are pending a few acceptances.  Once they are received the list will be updated. 

Microsoft Power Platform | March 2023 Newsletter

Welcome to our March 2023 Newsletter, where we'll be highlighting the great work of our members within our Biz Apps communities, alongside the latest news, video releases, and upcoming events. If you're new to the community, be sure to subscribe to the News & Announcements and stay up to date with the latest news from our ever-growing membership network who find real "Power in the Community".        LATEST NEWS Power Platform Connections Check out Episode Five of Power Platform Connections, as David Warner II and Hugo Bernier chat with #PowerAutomate Vice President, Stephen Siciliano, alongside reviewing out the great work of Vesa Juvonen, Waldek Mastykarz, Maximilian Müller, Kristine Kolodziejski, Danish Naglekar, Cat Schneider, Victor Dantas, and many more.       Use the hashtag #PowerPlatformConnects on social media for a chance to have your work featured on the show!   Did you miss an episode?  Catch up now in the Community Connections Galleries Power Apps, Power Automate, Power Virtual Agents, Power Pages     Power Platform leading a new era of AI-generated low-code development.   **HOT OFF THE PRESS** Fantastic piece here by Charles Lamanna on how we're reinventing software development with Copilot in Power Platform to help you can build apps, flows, and bots with just a simple description! Click here to see the Product Blog         Copilot for Power Apps - Power CAT Live To follow on from Charles' blog, check out #PowerCATLive as Phil Topness gives Clay Wesener Wesner a tour of the capabilities of Copilot in Power Apps.           UPCOMING EVENTS   Modern Workplace Conference Check out the Power Platform and Microsoft 365 Modern Workplace Conference that returns face-to-face at the Espace St Martin in Paris on 27-28th March. The #MWCP23 will feature a wide range of expert speakers, including Nadia Yahiaoui, Amanda Sterner, Pierre-Henri, Chirag Patel, Chris Hoard, Edyta Gorzoń, Erika Beaumier, Estelle Auberix, Femke Cornelissen, Frank POIREAU, Gaëlle Moreau, Gilles Pommier, Ilya Fainberg, Julie Ecolivet, Mai-Lynn Lien, Marijn Somers, Merethe Stave, Nikki Chapple, Patrick Guimonet, Penda Sow, Pieter Op De Beéck, Rémi Riche, Robin Doudoux, Stéphanie Delcroix, Yves Habersaat and many more.  Click here to find out more and register today!     Business Applications Launch 2023 Join us on Tuesday 4th April 2023 for an in-depth look into the latest updates across Microsoft Power Platform and Microsoft Dynamics 365 that are helping businesses overcome their biggest challenges today. Find out about new features, capabilities, and best practices for connecting data to deliver exceptional customer experiences, collaborating and creating using AI-powered capabilities, driving productivity with automation, and building future growth with today’s leading technology. Click Here to Register Today!       Power Platform Conference 2023 We are so excited to see you for the Microsoft Power Platform Conference in Las Vegas October 3-5th, 2023! But first, let's take a look below at some fun moments from MPPC 2022 in Orlando Florida. 2023 sees guest speakers such as Charles Lamanna, Heather Cook, Julie Strauss, Nirav Shah, Ryan Cunningham, Sangya Singh, and many more taking part, so why not click the link below to register for the #PowerPlatformConf today! Vegas, baby! Click Here to Register Today!      COMMUNITY HIGHLIGHTS Check out our top Super and Community Users reaching new levels!  These hardworking members are posting, answering questions, kudos, and providing top solutions in their communities.   Power Apps:  Super Users:  @WarrenBelz  |  @iAm_ManCat  Community Users: @LaurensM | @Rusk | @RJM07    Power Automate:   Super Users: @abm  | @Expiscornovus | @RobElliott  Community Users:  @grantjenkins | @Chriddle    Power Virtual Agents:   Super Users: @Expiscornovus | @Pstork1  Community Users: @MisterBates | @Jupyter123 | Kunal K   Power Pages: Super Users:  @OliverRodriguesOliverRodrigues | @Mira_Ghaly  Community Users: @FubarFubar | @ianwukianwuk  LATEST PRODUCT BLOG ARTICLES  Power Apps Community Blog  Power Automate Community Blog  Power Virtual Agents Community Blog  Power Pages Community Blog  Check out 'Using the Community' for more helpful tips and information:  Power Apps, Power Automate, Power Virtual Agents, Power Pages 

Register now for the Business Applications Launch Event | Tuesday, April 4, 2023

Join us for an in-depth look into the latest updates across Microsoft Dynamics 365 and Microsoft Power Platform that are helping businesses overcome their biggest challenges today.   Find out about new features, capabilities, and best practices for connecting data to deliver exceptional customer experiences, collaborating, and creating using AI-powered capabilities, driving productivity with automation—and building towards future growth with today’s leading technology.   Microsoft leaders and experts will guide you through the full 2023 release wave 1 and how these advancements will help you: Expand visibility, reduce time, and enhance creativity in your departments and teams with unified, AI-powered capabilities.Empower your employees to focus on revenue-generating tasks while automating repetitive tasks.Connect people, data, and processes across your organization with modern collaboration tools.Innovate without limits using the latest in low-code development, including new GPT-powered capabilities.    Click Here to Register Today!    

Check out the new Power Platform Communities Front Door Experience!

We are excited to share the ‘Power Platform Communities Front Door’ experience with you!   Front Door brings together content from all the Power Platform communities into a single place for our community members, customers and low-code, no-code enthusiasts to learn, share and engage with peers, advocates, community program managers and our product team members. There are a host of features and new capabilities now available on Power Platform Communities Front Door to make content more discoverable for all power product community users which includes ForumsUser GroupsEventsCommunity highlightsCommunity by numbersLinks to all communities Users can see top discussions from across all the Power Platform communities and easily navigate to the latest or trending posts for further interaction. Additionally, they can filter to individual products as well.   Users can filter and browse the user group events from all power platform products with feature parity to existing community user group experience and added filtering capabilities.     Users can now explore user groups on the Power Platform Front Door landing page with capability to view all products in Power Platform.      Explore Power Platform Communities Front Door today. Visit Power Platform Community Front door to easily navigate to the different product communities, view a roll up of user groups, events and forums.

Microsoft Power Platform Conference | Registration Open | Oct. 3-5 2023

We are so excited to see you for the Microsoft Power Platform Conference in Las Vegas October 3-5 2023! But first, let's take a look back at some fun moments and the best community in tech from MPPC 2022 in Orlando, Florida.   Featuring guest speakers such as Charles Lamanna, Heather Cook, Julie Strauss, Nirav Shah, Ryan Cunningham, Sangya Singh, Stephen Siciliano, Hugo Bernier and many more.   Register today: https://www.powerplatformconf.com/   

Users online (2,636)