The team needed an easy way to edit a picture by zooming in or out and moving it inside a fixed mask. So, we required a component that would not only zoom with a size bar but also with the mouse scroll, besides the necessity to have the same component working on a mobile device, with the pinch in and out feature.
However, the components we found had either inputs to define the size (hardcoded style, not good for non-software developers) or a moveable mask to crop the picture. Besides this, the available components were not easy to adapt to the behavior we needed, and so we concluded, after one week of search and tryouts, that we had to create our own, making it available for everyone who also needed a crop photo component with the same features.
We came across this amazing component on GitHub (check out the code which saved our developer’s life https://foliotek.github.io/Croppie/). It was as easy to use as basic JavaScript(JS) and incorporate it into the OutSystems(OS) code. Additionally, we have decided to make the various features provided by this component as simple to use and implement as possible.
How does it work then?
Select a picture from your device (use OS upload widgets here), zoom out, move the picture, zoom in as you like and click save. You will have your picture centered in a round mask and cropped to the size required without spoiling the quality.
Mobile
It only has a client action that allows saving the editions made, and the JS required to make it work.
The client action, CropOnClick doesn’t even need any inputs: it retrieves a binary output to be used afterward.
Web
On web, you will find a server action – Croppie_GetImage, which calls the JS function to crop your photo. It will receive the photo as a binary and transform it as a Base64 object so the JS can recognize the object and make its magic running. Then a notify action will transform the cropped photo into a binary again, sending it to the parent screen.
Easy right?
Croppie component Web and Mobile are available in Forge, at the OS platform. There are no dependencies in both components. You only need to provide the width and height of the mask and photo container. But as they are simple integers, just make sure you write them in pixels.
Hey that’s nice, but how do I use this?
– userTimeout, 2019
Good question userTimeout! Here it goes a simple instructions manual:
- Select your picture by clicking on the upload widget button.
2. After choosing your picture, adjust it to the mask and click save.
3. Finally, your cropped picture centered on the round mask.
And there you go, a masked photo cropper ready to go! You can try it out by downloading the demo (also available in Forge), and if it fits your needs, feel free to download the Web and Mobile components!
Happy cropping!
Published 26th March 2020
