Image cropping help

If you want to use the canvas as a crop box, with Taifun's Image extension. The following work is just to demonstrate the functionality.

I have broken down the process to three aia projects to make it easier to understand what is going on.
The canvas is a fixed size, in these demos of 300x300 (important! - this relates to a magic number (276) in the blocks for the size of the image to be displayed). It is not possible to drag the entire frame, the user has to resize using the corners.

  1. The frame

This aia creates a resizeable frame on the canvas. There is a button to allow for a dark or light frame for better visibility on an image.
image
imageCropper1_Frame.aia (9.6 KB)

  1. The frame and the images

This aia creates the resizeable frame and allows user to load images to the canvas, in the correct aspect
image
imageCropper1_Frame_Images.aia (599.2 KB)

  1. The frame the images and the crop

This aia creates the resizeable frame, allows loading of images and allows the user to crop the image to the size of the frame. The original image, which comes from the assets, is copied to the ASD, and this is the file that is modified. The output is shown on the canvas.
image
imageCropper1_Frame_Images_Crop.aia (602.8 KB)

I am working up an extension free version as well, but this is even more complicated due to the pixel manipulation required on the canvas (and it takes a while to process the image)

Credits to @Taifun for the Image and File extensions used in this demo.

3 Likes

Thanks a lot @TIMAI2. This is what I was looking for! I was just wondering how you all must be so good at math....This large amount of code would have surely taken me 2-3 months (or even more) to make. I'm not joking..

THANK YOU

Hello,

@Atom_Developer I need help with your extension.

As attached in the above picture, I just want to crop like this and then show the resulting image in a image component. I'm getting the input picture from Camera. I tried this:
image
How can I do that? (please attach blocks)..

Also one suggestion:
Please add a documentation on the extension you made (if possible) as there are many blocks which can't be understood directly.
Thank you

Regards,
Devanshu

As previously offered here find an aia project for an image cropper using no extensions. This takes a while to carry out the crop because it has to capture and redraw all the required pixels. The blocks are naturally more complicated than the previous projects. The original image is loaded into the canvas at full size to achieve the best standard of crop possible with this method.

This approach is really intended as a demo of what can be done if you put your mind to it, it is probably not practical for a production environment, an extension using the appropriate java libraries that works directly with the image file is a more useful solution.

image

image

imageCropper1NoExtn.aia (596.6 KB)

4 Likes

Ok, I'm using this in my upcoming app (will be soon published in the community!).

Thanks!

Hi @Atom_Developer
In your extesion I did the following code, image
and it didn't work can I get some help on the correct code?

Same here, I too have the same problem @Devanshu_Acharya

Refer @TIMAI2 's aia files in this thread, he has done that in a very neat manner without any extension. You should refer that....if you want to use the extension then @Atom_Developer will help you out....

Read the full thread and then you are good to go :slight_smile:

I tried @TIMAI2's aia file, but I don't want a list picker for the image. I want to use a Image Picker for the canvas image. @TIMAI2 please help :pray:

@TIMAI2, Can you suggest a aia file to use a image picker instead of list picker for the image to crop?

Just use the imagepicker to return the image then use the url provided.

You mean replace all LIST PICKER SLECTION for IMAGE PICKER SELECTION?
I tried it, but something is wrong. The image doesn't come to crop :confused:
Here is my AIA file: Photo_Editor.aia (70.7 KB)
Please fix it for me, it would be a great help :pray:

Sorry for the inconvenience!

from one of my howtos on the subject:

The html file MUST BE in the same folder as the image files for this to work (in my example, everything is in the assets). If your images are stored elsewhere on the device, then a copy of the html file will need to be made to the images directory - or the directory above the images directory (you will have to change the relative path in the webviewstring you send).

I suggest you pick the file, then move it to a location in your ASD where you have also set a copy of the html file, make sure you call the html file from that path.

Please help me. I do not want to use a list picker but my image is stored on firebase storage, I want to crop the image. Please help. It would be so nice of you.

I have replied on your original post. Do provide me answers there!

hi! @TIMAI2 , as i saw in your aix, this aix can only crop in rectangle shape. Can you please add a functionality, so that it can crop non- rectangular, shapes as well. There are 4 dots in your extension to crop, can you please add 6 dots?

@ Kvtechz

There is no aix, just blocks in an aia project. The initial design was to work with Taifun's Image extension, which crops rectanlges only, hence the four dots.

Also, you missed this :wink:

I went thru the link provided by you, but, that's not what i wanted. Actually, i don't want prefixed shapes.
Just like page scanner apps, i wanted to scan a page, and also, adjust it's boundaries. Apps like CAMSCANNER, ADOBE SCAN

I see so you want a free cropping option to crop irregular shapes i saw a java example if a extension developer is free he can try -

@TIMAI2
Can you please help in cropping the image that i have to take from firebase storage. Please provide me aia. I checked your aia files of cropping image but they are using list picker. I do not want to use that.
Please help its been days i am unable to find exact answer.