cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
WhiskeyClone
Frequent Visitor

Merging Photo Image and Pen Input Image

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!

1 ACCEPTED SOLUTION

Accepted Solutions
goobernoodles
Advocate III
Advocate III

 

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
    

 

 

 

 

 

View solution in original post

3 REPLIES 3
goobernoodles
Advocate III
Advocate III

 

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
    

 

 

 

 

 

Hi,

 

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

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. 

Helpful resources

Announcements
Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Super User 2 - 2022 Congratulations

Welcome Super Users

The Super User program for 2022 - Season 2 has kicked off!

September Events 2022

Check out all of these events

Attend in person or online, there are incredible conferences and events happening all throughout the month of September.

Government Carousel

New forum: GCC, GCCH, DoD - Federal App Makers (FAM)

In response to the unique and evolving requirements of the United States public sector, Microsoft has created Power Apps US Government.

Users online (2,188)