How to use Cropper Mobile

Cropper Mobile is a component that you can use to crop images on a Mobile Application. It’s the Mobile runtime version of the JavaScript image cropper, completely client-side. Based on https://fengyuanchen.github.io/cropper/.

So for starters, the first thing you need is an image you can either use one stored in your database or use the upload widget to upload one.

In the Sample. in the SampleScreen where you are going to crop an image, add a local variable of the type binary data. Besides this local variable, we are going to need two more variables: one to validate if it is to show the cropper (Name it ShowCropper, set the type to Boolean and the Default Value to False); and another to validate if the button to crop is to be shown or not (Name it ShowCropper, set the type to Boolean and the Default Value to False).

In this sample we are going to upload an image, so first drag an If and set the condition to ShowCropper. Drag ImageCropper Block to the True branch of the If. This Block has two events so we are going to need two actions to handle these events. Create these actions.

In the False branch, drag an Upload Widget, set the FileContent to the local variable of the type BinaryData. Next, add an OnChange action. This action is needed because after the image is upload we need to show the cropper, so drag an Assign and add the following assignment ShowCropper = True.

 

We are going to need a button to inform that the cropper is ready, so go back to the SampleScreen and below the ImageCropper Block drag another If and set the condition to ShowCropButton.  Inside the True branch of this If drag a Button and create an action to handle the OnClick, name this action CropDone. In this action, we are going to use the action CropImage from the CropperMobile Component.



Now let’s go to the action to handle the two events from the ImageCropper Block.

The action OnImageCropperImageCropped handles the ImageCropped Event from the block. The Event handler will receive the binary data of the image and then you can save it to the database or do what best fits your purpose. Basically, this allows you to obtain the cropped image. In this action, we are going to assign the picture to the cropped version. 

1. Drag an Assign and set the following assignment GetDemoUserData.DemoUser.Picture = CroppedImage.

2. Because we already cropped the image we need to hide to crop button so add another assignment ShowCropButton = False. After, is also necessary to hide the cropper so add another assignment ShowCropper = False.

3. Your action should look like this.

The Event Ready is going to be handled by the OnImageCropperReady. This action is really simple, we just need an Assign to show the CropButton. So add the following assignment ShowCropButton = True. This will allow the user to crop the canvas image.

Besides that, you can also define some additional options to the cropper. If you are interested you can see them here.

Now given that you did all of what I said before, you should now be able to upload images and interact with them with the cropper.