cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
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
Highlighted
Advocate III
Advocate III

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
    

 

 

 

 

 

View solution in original post

2 REPLIES 2
Highlighted
Advocate III
Advocate III

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
    

 

 

 

 

 

View solution in original post

Highlighted
Frequent Visitor

Re: Merging Photo Image and Pen Input Image

Hi,

 

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

Helpful resources

Announcements
secondImage

Demo-Extravaganza 2020

Check out these cool Power Apps & vote on your favorite!

secondImage

Robotic Process Automation

Let's talk about the solution provided by Microsoft for Robotic Process Automation (RPA)

secondImage

Community Highlights

Check out whats happening in Power Apps

secondImage

Community User Group Member Badges

FIll out a quick form to claim your community user group member badge today!

Top Solution Authors
Top Kudoed Authors
Users online (8,359)