Compress, Resize then Convert Image to DataUri in Power Automate
A customer recently asked us how to compress, resize and then convert an Image into a DataUri for inclusion in an HTML document for conversion to PDF format… and we thought that is a great use case for a quick blog post!
For this example, we’ll use a manual trigger action before retrieving the source image file from Azure blog storage, noting that this Flow will work with any trigger action and any of the ‘Get File’ actions which return the ‘File Contents’ property.
1. Launch Power Automate – https://powerautomate.microsoft.com
2. Create a new ‘Instant flow‘
3. Provide the following information:
3.a. Flow name: Enter a relevant name/description for the Flow
3.b. Select the SharePoint ‘Manually trigger a flow‘ trigger action
3.c Click ‘Create‘
4. Add a ‘Get file content‘ Azure File Storage action
4.b Select the target source file
I’ve hardcoded this to pickup a specific file and I realise this is unreaslistic in a realworld scenario, however please configure your Flow to retrieve the source image from the required location using dynamic file selection if needed.
5. Add the Encodian ‘Compress Image‘ action
5.a File Content: Select the ‘File Content‘ property provided by the ‘Get file content‘ Azure file storage action
5.b Image Type: Specify the relevant image type
The original source image was 1.05MB, post compression this file was reduced to 252k… to validate this I added a ‘Create file’ Azure file storage action to add the compressed file to storage, you do not need to perform this step.
6. Add the Encodian ‘Resize an Image‘ action, and configure as required:
6.a. Filename: Manually enter the filename or use an action to dynamically obtain such as the ‘Get file metadata‘ Azure file storage action.
6.b File Content: Select the ‘File Content‘ property from the ‘Compress an Image‘ Encodian action
6.c. Resize Type: Select ‘Percentage‘
6.d Resize Percentage: Enter ‘25‘
This configuration will resize the dimensions of the image to 25% of the original size
7. Add a ‘Compose‘ action
7.a Click ‘Inputs‘, Click ‘Expression‘ and then type ‘dataUri(base64ToBinary()) ‘
7.b. Click ‘Dynamic content‘, select the ‘File Content‘ property from the ‘Resize an Image‘ Encodian action.
7.c Click ‘OK‘
The source image has now been compresed, resized and converted into a DataUri, we’ll now insert this DataUri into a very simple HTML document before converting to PDF
8. Add a ‘Convert HTML to PDF‘ Encodian action
8.a. PDF Filename: Enter the name for the output PDF document
8.c. HTML Data: Copy and paste in your HTML template, and place your cursor where you would like to insert the DataUri
8.d. Select the ‘Outputs‘ property from the ‘Compose‘ action to insert the DataUri into the desired location within the HTML template.
The source image has now been compresed, resized and converted into a DataUri, inserted into a HTML temaplate and converted to PDF… phew! For this demo I’ll simply add the converted document back to Azure file storage, but you can obviously do whatever you need to do using Power Automate!
9. Add the ‘Create file‘ Azure file storage action
9.a. Folder path: Select the target folder
9.b. File name: Select the ‘File name‘ property from the ‘Convert HTML to PDF‘ Encodian action
9.c. File content: Select the ‘File Content‘ property from the ‘Convert HTML to PDF‘ Encodian action
10. Let’s test the Flow, click ‘Test‘
11. Click ‘Save & Test‘
12. Click ‘Run Flow‘, Click ‘Done‘
The Flow should have successfully executed:
The resulting PDF document should have been created and the image inserted into the document.
Finally…
We hope you’ve found this guide useful, and as ever, please share any feedback or comments, all are welcome!