web
You’re offline. This is a read only version of the page.
close
Skip to main content
Community site session details

Community site session details

Session Id : e92q9i/ykMH1JG8WLwFHRZ
Power Apps - Building Power Apps
Answered

Merging Photo Image and Pen Input Image

Like (0) ShareShare
ReportReport
Posted on 4 Nov 2019 16:31:05 by 8

Hi there,

 

I'm new to PowerApps, and am currently in the process of building a reporting/auditing app; The app includes a camera option as well as a Pen Input option, and essentially I want to offer the user the choice to sketch notes on top of the photo and then save this back locally, before saving it to SharePoint. Now currently, the original photo and the sketched notes register as separate images, the original picture on one, and the sketched notes appearing by themselves on the other, and the issue I'm having is how I'd actually go about merging these two images together to create a single image that just has the photo and the notes layered over it? How would I go about doing this? I've found a video with Paul Culmsee where he briefly mentions having achieved this himself using Azure Functions but he doesn't really go into any detail regarding what commands to use or how this was done? I assume I'd likely have to break down each image to their base 64 formats, but I'm not sure where to go afterwards.

 

If anyone can offer any pointers I'd be hugely appreciative. 

Please let me know if any additional information is required!

Thank you!

  • MLe92 Profile Picture
    33 on 02 Nov 2022 at 09:26:02
    Re: Merging Photo Image and Pen Input Image

    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.

  • Chris380 Profile Picture
    2 on 11 Feb 2022 at 13:44:13
    Re: Merging Photo Image and Pen Input Image

    I know it's been a while on this, but were you ever able to get this to work? I'm looking for a way to merge images and thought I might be able to modify this to do so. 

  • WhiskeyClone Profile Picture
    8 on 08 Nov 2019 at 14:52:22
    Re: Merging Photo Image and Pen Input Image

    Hi,

     

    Thanks for your help - Hopefully I can piece something together with this!

  • Verified answer
    goobernoodles Profile Picture
    175 on 04 Nov 2019 at 18:57:53
    Re: Merging Photo Image and Pen Input Image

     

    I put a little bit of time into this last year.  I have a rough power shell script that combines two images.  I'm forgetting details about how exactly I was planning on orchestrating the entire process, but... I believe this was intended to be part of a flow that executed after a Sharepoint row was created.  

     

    Powerapps submits row with original photo and pen input images attachments (containing the images) to Sharepoint ->  Flow is triggered by the new row -> Flow saves image to on premise file server location -> azure automation runbook executes (on prem) with the path to the markup image.


     

     

     

     

     

    It wasn't perfect - I believe there were issues due to size differences between the app's pen input control and the size of the original image.  Definitely needs some work, but I didn't have any more time to commit to it.  I'm sure I'll look into it some more in the future. 

     

    I haven't tested the script and it's not commented very well, but maybe it can give you a better sense of what you might be able to do.

     

     

     Param(
    
     [parameter(Mandatory=$true)]
     [ValidateNotNullorEmpty()]
     [string]$MarkupImagePath
    
     )
     
     [Reflection.Assembly]::LoadWithPartialName("System.Drawing") | Out-Null
     $VerbosePreference = "Continue" 
     
    
     #Check to see if markup image exists...
     $MarkupExists = Get-Item -Path $MarkupImagePath -ErrorAction SilentlyContinue
    
     #Markup image should be originalImagePath_MARKUP.jpg we can get the path of the original by removing "_MARKUP"
     $OriginalImagePath = $MarkupExists.FullName.replace("_MARKUP","")
    
     #Make sure it exists...
     $OriginalExists = Get-Item -Path $OriginalImagePath
    
    
    
     If($MarkupExists -and $OriginalExists){
     
     $imageDirectory = $MarkupImagePath -replace '\\\w+\.\w+\Z','' 
    
     $outPath = $MarkupImagePath.replace(".jpg","_combined.jpg")
     
     $srcImg = [System.Drawing.Image]::FromFile($OriginalImagePath)
     $markupImg = [System.Drawing.Image]::FromFile($MarkupImagePath)
     $bmpFile = new-object System.Drawing.Bitmap([int]($srcImg.width)),([int]($srcImg.height))
    
     $Image = [System.Drawing.Graphics]::FromImage($bmpFile)
     $Image.SmoothingMode = "AntiAlias"
     $Image.DrawImage($srcImg,0,0,$srcImg.Width,$srcImg.Height)
     $Image.DrawImage($markupImg,0,0,$srcImg.Width,$srcImg.Height)
    
    
     Write-Verbose "Save and close the files"
     $bmpFile.save($outPath, [System.Drawing.Imaging.ImageFormat]::Jpeg)
     $bmpFile.Dispose()
     $srcImg.Dispose()
     $markupImg.Dispose()
    
     If(Test-Path $outPath){
     #Remove-Item -Path $MarkupImagePath -Force -ErrorAction SilentlyContinue
     $Result = $outPath 
     }
     Else{
     $Result = "Error - $outPath not found!" 
     }
    
     }
     Else{
     
     Throw("Invalid path: $MarkupImagePath")
     
     }
    
     Return $Result
     

     

     

     

     

     

Under review

Thank you for your reply! To ensure a great experience for everyone, your content is awaiting approval by our Community Managers. Please check back later.

Helpful resources

Quick Links

Announcing our 2025 Season 2 Super Users!

A new season of Super Users has arrived, and we are so grateful for…

Paul Stork – Community Spotlight

We are honored to recognize Paul Stork as our July 2025 Community…

Congratulations to the June Top 10 Community Leaders!

These are the community rock stars!

Leaderboard > Power Apps

#1
WarrenBelz Profile Picture

WarrenBelz 791 Most Valuable Professional

#2
MS.Ragavendar Profile Picture

MS.Ragavendar 410 Super User 2025 Season 2

#3
mmbr1606 Profile Picture

mmbr1606 275 Super User 2025 Season 2

Loading complete