B4J Library [B4X] [XUI] xResizeAndCrop

klaus · Dec 5, 2018

The xResizeAndCrop Class is a B4X libary.
Current version 1.8

It works on all three platforms: B4A, B4i and B4J.
The xResizeAndCrop.b4xlib and the xResizeAndCrop.xml files are attached.
You need to copy the xResizeAndCrop.b4xlib file to the AdditionlLibraries\B4X folder!

Don’t copy the xResizeAndCrop.xml file to the AdditionalLibraries folder, copy it in another folder for all b4xlib xml files.
Example: AdditionlLibraries\B4XlibXMLFiles
The xResizeAndCrop.xml file is for help purposes and is useful with the B4X Help Viewer or the B4XObjectBrowser.
The xResizeAndCrop.xml was generated with this tool: b4xlib - XML generation

It is an evolution of the B4A project: Resize and crop image.
To make a B4X CustomView was inspired by this thread: [B4X] [XUI] CropView.

The demo program is a B4XPages project for all three platforms.
Tested on PC, Android Samsung S6, iPhone 6.

EDIT: 2023.03.28 Version 1.8
Added the code to load an image for B4i.

EDIT: 2023.03.28 Version 1.7
Set the crop window to the entire image when the width / height ratio is NONE
Only the xResizeAndCrop.b4xlib and the xResizeAndCrop.xml files have been replaced.

EDIT: 2022.06.26 Version 1.6
Added Circle and round corner crop
Added RoundCorner and CornerRadius properties.
The libary needs the BitmapCreator library.

EDIT: 2020.07.15 Version 1.5
Added the HandleDotWidth property

EDIT: 2020.07.15 Version 1.4
Amended error with CroppedImage without a CroppedView.

EDIT: 2020.06.25 Version 1.3
Updated the Tag property according to Erels recommendation:
https://www.b4x.com/android/forum/t...lv-or-any-other-container.117992/#post-738358

EDIT: 2019.03.12 Version 1.2
Added WidthHeightRatio and WidthHeightRatioValue properties
defining fixed or custom Width / Height ratios for the cropped image
Added RotateImage method, original image rotation.

EDIT: 2019.01.30 Version 1.1
Added a Square property.
When Square = True then the resized image is always square.

xResizeAndCrop

Author: Klaus CHRISTL (klaus)
Version: 1.6

xResizeAndCrop
- Events:
  - CropFinished
- Functions:
  - Initialize (Callback As Object, EventName As String) As String
  - IsInitialized As Boolean
    Tests whether the object has been initialized.
  - LoadImage (Dir As String, FileName As String) As String
    loads the given image file to the xResizeAndCrop Customview
  - RotateImage(Degrees As Int)
- Properties:
  - CornerRadius As Int
    sets or gets the CornerRadius property
    the radius is expressed in % of the smalles side, max value = 50, min value = 0
  - CroppedImage As B4XBitmap [read only]
    gets the cropped image as a B4XBitmap, read only
  - CroppedView
    sets the Panel / Pane view for the cropped image, write only
    the Panel / Pane view must be added in the main code and transmitted to the custom view as this property.
  - HandleDotWidth As Int
    sets or gets the HanldeDotWidth property
    it must be a dip value, default value 13dip
  - HandleColor As Int
    sets or gets the HandleColor property
    value must a xui color
    Example code: <code>xResizeAndCrop1.HandleColor = xui.Color_RGB(255, 215, 0)</code>
  - Height As Int
    sets or gets the Height property
  - Image As B4XBitmap
    sets the image (B4XBitmap) to the Customview, write only
  - Left As Int
    sets or gets the Left property
  - MinCroppedHeight As Int
    sets or gets the MinHeight property
    value in pixels, no dip value
    if Square = True, the min cropped width is set equal to this height value
  - MinCroppedWidth As Int
    sets or gets the MinWidth property
    value in pixels, no dip value
    if Square = True, the min cropped height is set equal to this width value
  - RoundCorners As Boolean
    sets or gets the RoundCorners property
    rounds the corners with a radius equal to the CornerRadius property
  - Top As Int
    sets or gets the Top property
  - Visible As Boolean
    sets or gets the Visible property
  - Width As Int
    sets or gets the Width property
  - WidthHeightRatio As String
    sets or gets the WidthHeightRatio property
    possible values: None Square 3/2 2/3 4/3 3/4 16/9 9/16 Custom
    None = any width and height
    Square = True means that the resized image is always square
    3/2 = ratio 1.5
    2/3 = ratio 0.6667
    4/3 = ratio 4/3
    3/4 = ratio 3/4
    16/9 = ratio 16/9
    9/16 = ratio 9/16
    Custom = user defined ratio set in the WidthHeightRatioValue property
  - WidthHeightRatio As Double
    sets or gets the WidthHeightRatioValue property
    only active if the WidthHeightRatio property is set to "Custom"

LucaMs · Jun 22, 2022

Conclusion: your library works great. (only that... "I can't drag the bottom edge all the way down"; maybe adding a button: "Select all")
In the demo and in my project we should get the dimensions from the file and pass these to the LoadBitmap method (and LoadBitmapResize would not be needed)

LucaMs · Jun 22, 2022

LucaMs said:
we should get the dimensions from the file

Not so easy for B4X (multiplatform).

LucaMs · Jun 22, 2022

LucaMs said:
Not so easy for B4X (multiplatform).

B4A solution:

B4X:

Private Sub btnSelectImage_Click
    ShowContentChooser
    Wait For ContentChooser_Result (Success As Boolean, Dir As String, FileName As String)
    If Success Then
        Dim bmp As Bitmap
        bmp.Initialize(Dir, FileName)
'        xResizeAndCrop1.Image = xui.LoadBitmapResize(Dir, FileName, 4000, 4000, True)
        xResizeAndCrop1.Image = bmp
        xResizeAndCrop1.mBase.Color = xui.Color_Blue
        lblRotate.Visible = True
    End If
End Sub

The log "is perfect", this way.

LucaMs · Jun 22, 2022

LucaMs said:
B4A solution:

B4J solved too.

klaus · Jun 23, 2022

I retested the demo program and replaced:

B4X:

xResizeAndCrop1.Image = xui.LoadBitmapResize(ImageDir, ImageFileName, 2000, 2000, True)

by

B4X:

xResizeAndCrop1.Image = xui.LoadBitmap(ImageDir, ImageFileName)

and now I get the correct values.
The original image: 6000 * 4000
And the Logs: 5994 * 4000
The 6 pixel difference is due to the fact that the crop cursor resolution is not 1 pixel.

I had used LoadBitmapResize in the demo program to minimize the memory needed.
But this is only in the demo program and is not a problem of the xResizeAndCrop library.

I had a short look at your program.
The problem is in this line:

B4X:

xResizeAndCrop1.Image = xui.LoadBitmapResize(Dir, FileName, B4XImageView1.mBase.Width, B4XImageView1.mBase.Height, True)

You resize the image to adapt it to your B4XImageView1 object.
If you want the image with the original resolution you must use :

B4X:

xui.LoadBitmap(Dir, FileName)

LucaMs · Jun 23, 2022

klaus said:
I retested the demo program and replaced:

B4X:

xResizeAndCrop1.Image = xui.LoadBitmapResize(ImageDir, ImageFileName, 2000, 2000, True)

by

B4X:

xResizeAndCrop1.Image = xui.LoadBitmap(ImageDir, ImageFileName)

and now I get the correct values.
The original image: 6000 * 4000
And the Logs: 5994 * 4000
The 6 pixel difference is due to the fact that the crop cursor resolution is not 1 pixel.

I had used LoadBitmapResize in the demo program to minimize the memory needed.
But this is only in the demo program and is not a problem of the xResizeAndCrop library.

I had a short look at your program.
The problem is in this line:

B4X:

xResizeAndCrop1.Image = xui.LoadBitmapResize(Dir, FileName, B4XImageView1.mBase.Width, B4XImageView1.mBase.Height, True)

You resize the image to adapt it to your B4XImageView1 object.
If you want the image with the original resolution you must use :

B4X:

xui.LoadBitmap(Dir, FileName)

Yes, Klaus, it is "the same" I wrote in #40.

Thank you.

klaus · Jun 23, 2022

Hi Luca,

Is this what you want to do ?
or this ?

LucaMs · Jun 23, 2022

klaus said:
Hi Luca,

Is this what you want to do ?

The left one, Klaus. I did it.

Thank you anyway ?

klaus · Jun 23, 2022

Yes, but now it will be directly in the library.

klaus · Jun 23, 2022

The returned bitmap has round corners, which is not the case in your project.
In your project, you could use a B4XView/Panel instead of the B4XImageView and and set it as the CroppedView property.
The advantage is that the rounded corners are updated directly, even when you move the handles.
I will update the library hopefully tomorrow or on Sunday. The demo project will become a B4XProject.

LucaMs · Jun 23, 2022

klaus said:
The demo project will become a B4XProject.

I created that B4XPages project not only because it is now a habit, but because it would be useful to have reusable B4XPages in other projects (how/where to save them, without saving a whole project? I haven't decided yet ? ?).

klaus · Jun 26, 2022

The xResizeAnd Crop Class has been updated to version 1.6 in the first post.
Added Circle and round corner crop
Added RoundCorner and CornerRadius properties.
The library needs the BitmapCreator library.

GeoT · Mar 24, 2023

Hello.
Is there a way to make the initial crop box the size of the image in case you just want to rotate the image when WidthHeightRatio = "None"?
Thank you.

klaus · Mar 24, 2023

Sorry, but currently no.

GeoT · Mar 24, 2023

Ok.
There is also no indicator that the marker box occupies the entire image without missing any pixels, right?
Thank you.

klaus · Mar 24, 2023

Yes.
I have never tested it.
What i can do is, when the width / height ratio is none, to set the crop window to the entire image.
In this case, the entire image with all pixels is taken.
Can you please test the joined version ?

Edit: 2023.03.28
Removed the library file, it has been update in the first post.

GeoT · Mar 24, 2023

Yes.
Now I look at it.
Thank you.

GeoT · Mar 24, 2023

When measuring bitmaps. Reading from logger:

Samsung Galaxy Grand Prime+ with Android 6.1

Original size (width x height)	Device in portrait	Device in landscape
400 x 600	400 x 601	400 x 602
800 x 1067	800 x 1068	800 x 1069
800 x 533	800 x 532	800 x 535
3264 x 2448	3264 x 2445	3264 x 2454
250 x 250	250 x 250	251 x 251
1440 x 1440	1440 x 1440	1440 x 1440

Samsung Galaxy A50 with Android 11

Original size (width x height)	Device in portrait	Device in landscape
400 x 600	400 x 600	400 x 600
800 x 1067	800 x 1067	800 x 1070
800 x 533	800 x 533	800 x 534
3264 x 2448	3264 x 2447	3264 x 2448
250 x 250	250 x 250	251 x 251
1440 x 1440	1440 x 1440	1440 x 1440

I attach my example in B4A. Now I get the image from DirAssets first, but you can load the images with the load button.

klaus · Mar 26, 2023

Can you please check the attached version.
I did not change the version number.

GeoT · Mar 26, 2023

Only the value in bold will change.

Samsung Galaxy Grand Prime+ with Android 6.1

Original size (width x height)	Device in portrait	Device in landscape
400 x 600	400 x 601	400 x 602
800 x 1067	800 x 1068	800 x 1069
800 x 533	800 x 532	800 x 535
3264 x 2448	3264 x 2445	3264 x 2454
250 x 250	250 x 250	251 x 251
1440 x 1440	1440 x 1440	1440 x 1440

Samsung Galaxy A50 with Android 11

Original size (width x height)	Device in portrait	Device in landscape
400 x 600	400 x 600	400 x 600
800 x 1067	800 x 1067	800 x 1070
800 x 533	800 x 533	800 x 534
3264 x 2448	3264 x 2448	3264 x 2448
250 x 250	250 x 250	251 x 251
1440 x 1440	1440 x 1440	1440 x 1440

Thank you.

B4J Library [B4X] [XUI] xResizeAndCrop

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Active Member

Expert

Active Member

Expert

Active Member

Active Member

Attachments

Expert

Attachments

Active Member

Similar Threads

Privacy & Transparency

Privacy & Transparency