Image cropping help

Hello,
The app you made is perfectly fine but is too complex for me to understand. If you could tell which blocks to use (as I just want to crop the image captured from camera component).

Also had a doubt if we can make a new folder through our apps in the phone where all the final files I generate are stored (independent folder)?

If I can find the time, i will have a look at creating an up to date image cropper, using the canvas and Taifun's Image extension.

do a search for Crop in the extensions directory
https://puravidaapps.com/extensions.php

try for example the
CropView Extension by Atom_Developer to crop Image View With Customizations

Taifun


Trying to push the limits! Snippets, Tutorials and Extensions from Pura Vida Apps by icon24 Taifun.

Thank you! You helped me a lot and reduced my code.. But I have a problem- I don't have a Kodular community account (I do not want to make an account too) and can't download the extension of @Atom_Developer . Can you post it here?

Regards.

1 Like

Sorry, only the author of an extension is allowed to upload the extension into this community...
@Atom_Developer

Taifun

1 Like

Here is it :+1:
com.atomdeveloper.CropView.aix (75.0 KB)

1 Like

Thanks a lot

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.