Power Apps – How to build an image annotation / mark up tool

Introduction:

We will learn how to create simple set up in Power Apps to have your images annotated /drawn over for notes.

Step 1:

Insert an “Add Picture” control. By default it is grouped and the following naming convention should be:

• AddMediaButton1
• UploadedImage1

For AddMediaButton1, change its ChangePictureText property into:

""

For UploadedImage1, change its ImagePosition property into:

ImagePosition.Fit

Step 2:

Insert a Pen Input control named PenInput1 over the ‘Add Picture’ control. We will make PenInput1 to be the same size as the UploadedImage1 control. Make its properties into:

Width property

UploadedImage1.Width

Height property

UploadedImage1.Height

X property

UploadedImage1.X

Y property

UploadedImage1.Y

Visible property

!IsBlank(AddMediaButton1.Media)

Step 3:

Insert an Image control named Image1 beside PenInput1 and the ‘Add Picture’ control. We will make Image1 to be the same size as UploadedImage1 control. Make changes to the following properties:

ImagePosition property

ImagePosition.Fit

Height property

UploadedImage1.Height

Width property

UploadedImage1.Width

Image property

AddMediaButton1.Media

Step 4:

Insert another Image named Image2 over Image1. We will make Image2 to have the same size and same position as Image1. Make changes to the following properties:

ImagePosition property

ImagePosition.Fit

Width property

Image1.Width

Height property

Image1.Height

X property

Image1.X

Y property

Image1.Y

Image property

PenInput1.Image

Conclusion:

You may test the tool by doing the following:

• Click the Add a Picture button and attach a file/ take a photo (for mobile)
• The Pen Input will appear, draw some annotations over it
• You will see that the image beside it will output an annotated image. You will have to save AddMediaButton1.Media and PenInput1.Image into your desired data source.
• Need to save the annotated image as a PDF? See the expanded tutorial HERE