Answered

Merging Photo Image and Pen Input Image

(0) Share

Report

Posted on by WhiskeyClone

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!

All responses (4)

Answers (1)

MLe92 33 on at

Like (0)

Report

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 2 on at

Like (0)

Report

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 8 on at

Like (0)

Report

Re: Merging Photo Image and Pen Input Image

Hi,

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

goobernoodles 175 on at

Like (1)

Report
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