B4J Library [B4X] [XUI] xResizeAndCrop

klaus · Dec 5, 2018

The xResizeAndCrop Class is a B4X libary.
Current version 1.7

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.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"

klaus · Jul 15, 2020

To get the cropped image i need a cropped panel, but why?

You don't need a Panel nor Pane!
The CroppedImage method returns a B4XBitmap.
Don't confuse with CroppedView!
This is a B4XView where you can automatically copy the cropped image.

Alexander Stolte · Jul 15, 2020

klaus said:
ou don't need a Panel nor Pane!

but on the code i see this:

ExtractCroppedImage:

Private Sub ExtractCroppedImage
    Private rectDest As B4XRect
    Private cLeft, cTop, cWidth, cHeight As Int
   
    If xpnlCropped.IsInitialized Then
        If rectImage.Width / rectImage.Height > imvCroppedWidth / imvCroppedHeight Then
            xpnlCropped.Width = imvCroppedWidth
            xpnlCropped.Height = imvCroppedWidth / rectImage.Width * rectImage.Height
        Else
            xpnlCropped.Height = imvCroppedHeight
            xpnlCropped.Width = imvCroppedHeight / rectImage.Height * rectImage.Width
        End If
        xcvsCropped.Resize(xpnlCropped.Width, xpnlCropped.Height)
       
        cLeft = Floor((rectImage.Left - ximvImage.Left) * PixelScale)
        cTop = Floor((rectImage.Top - ximvImage.Top) * PixelScale)
        cWidth = Ceil(rectImage.Width * PixelScale)
        cHeight = Ceil(rectImage.Height * PixelScale)
        xbmpCropped = xbmpImage.Crop(cLeft, cTop, cWidth, cHeight)
       
        rectDest.Initialize(0, 0, xpnlCropped.Width, xpnlCropped.Height)
       
        xcvsCropped.ClearRect(rectCroppedView)
        xcvsCropped.DrawBitmap(xbmpCropped, rectDest)
        xcvsCropped.Invalidate
    End If
End Sub

and this panel is set on the setCroppedView

if i call CroppedImage without to set a "CroppedView" then the "CoppedImage" is null.
or am I looking at this wrong?

klaus · Jul 15, 2020

You are right, there was a problem.
The xResizeAnd Crop Class has been updated to version 1.4 in the first post.

JOTHA · Apr 22, 2021

Hello Klaus,

I tried your code yesterday (it works fine), but today there is the following message:

[IDE message - 1:52:41]
Ein Fehler trat auf.
Fehlende jar-Datei für die Bibliothek: xResizeAndCrop.xml

... and the message apears also when I open B4A with all my other codes!
What is the reason for that?

klaus · Apr 22, 2021

Remove the xResizeAndCrop.xml file from your AdditionalLibraries folder as written in the thread:
Don’t copy thexResizeAndCrop.xml file to the AdditionalLibraries folder, copy it in another folder for all b4xlib xml files.
The xResizeAndCrop.xml is only needed if you use the B4X Help Viewer.

JOTHA · Apr 22, 2021

Oooh sorry Klaus, that was my mistake!
I've already read the sentence and copied the xml file into an extra folder, but at the same time I copied this file into the library folder ...

klaus · Feb 12, 2022

The xResizeAnd Crop Class has been updated to version 1.5 in the first post.
Added the HandleDotWidth property.

Magma · Feb 15, 2022

Thanks for sharing knowledge ! Square cropping... WOW!!!!!!

LucaMs · Jun 18, 2022

Very useful library, Klaus, thank you.

Am I wrong or there is no property to change the background color, currently gray?

EDIT. It is possible so:

B4X:

xResizeAndCrop1.mBase.Color = xui.Color_Blue

but that does not work if you set the color to xui.Color_Transparent or xui.Color_White

klaus · Jun 18, 2022

You can change the background color.
But I draw a dark color over mBase to darken the not cropped part of the image.
This is the gray color you see with xui.Color_White and xui.Color_Transparent.
All other colors are darkened the same way.

LucaMs · Jun 22, 2022

Although very well done, class and library, they have a rather important basic flaw.
The image you get is a part of the display, not of the image you uploaded from file, so its resolution is significantly lower than the original.

I hope I have explained, but I will give an example.
I uploaded an image that has a resolution of 1440 x 2560; using the library, I selected the entire displayed image and the CroppedImage method returned a B4XBitmap which has a resolution of 175 x 312.

klaus · Jun 22, 2022

How did you do it ?

I just added this routine in the demo program and it returns the correct values.

B4X:

Private Sub xResizeAndCrop1_CropFinished
    Log(xResizeAndCrop1.CroppedImage.Width & " / " & xResizeAndCrop1.CroppedImage.Height)
End Sub

LucaMs · Jun 22, 2022

klaus said:
How did you do it ?

I just added this routine in the demo program and it returns the correct values.

B4X:

Private Sub xResizeAndCrop1_CropFinished Log(xResizeAndCrop1.CroppedImage.Width & " / " & xResizeAndCrop1.CroppedImage.Height) End Sub

I created a simple B4XPages project.

Actually your demo works much better, albeit not perfectly.

Original Image:

(log: 1125 / 1989 - original image: 1440 / 2560)

[While that's not involved, I can't drag the bottom edge all the way down]

LucaMs · Jun 22, 2022

LucaMs said:
I created a simple B4XPages project.

Attached.

(Don't watch the rotation ; it doesn't work as it should and I haven't had time to fix this; nor the project name )

LucaMs · Jun 22, 2022

I forgot to write that, for the purpose of that B4XPages, in the layout Square is checked (of course?) but in the project I have attached it's not, because I wanted to select the whole image and see the log.

LucaMs · Jun 22, 2022

klaus said:
I tested again.
Original image 1500 * 2000 pixels.
Cropped image 1497 * 1998 pixels.
Sorry, but I cannot reproduce what you are getting.
And how did you get the 175 x 312 in post #31 ?

See the project I attached.

klaus · Jun 22, 2022

I removed my previous post.
I have looked further with a bigger image and I saw that when I copy an image from the computer onto the device the size is changed.
I will investigate further tomorrow.
What do you get if you add the second line:

B4X:

Private Sub xResizeAndCrop1_CropFinished
    Log(xResizeAndCrop1.CroppedImage.Width & " / " & xResizeAndCrop1.CroppedImage.Height)
    Log(xResizeAndCrop1.Image.Width & " / " & xResizeAndCrop1.Image.Height)
End Sub

LucaMs · Jun 22, 2022

klaus said:
I will investigate further tomorrow.

Take it easy, Klaus; mine was little more than fun (I'll use it, most likely, but in a long time to come)

LucaMs · Jun 22, 2022

klaus said:
What do you get if you add the second line:

In my project:
175 / 312
175 / 312

In your demo:
1125 / 1995
1125 / 2000

LucaMs · Jun 22, 2022

In my project I found the "error":

B4X:

    Wait For ContentChooser_Result (Success As Boolean, Dir As String, FileName As String)
    If Success Then
        xResizeAndCrop1.Image = xui.LoadBitmapResize(Dir, FileName, B4XImageView1.mBase.Width, B4XImageView1.mBase.Height, True)

In yours it is:

B4X:

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

2000, 2000. That's probably why bigger images...

B4J Library [B4X] [XUI] xResizeAndCrop

Attachments

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency