Android Question Resize and Crop

[luisro]

Hi,

I have this example of our colleague Klauss

https://www.b4x.com/android/forum/t...d/forum/attachments/resizeandcrop5-zip.51468/

In some images it works perfect but in others nothing else takes half of the image to move the focus to cut, is there any solution to that problem? I imagine it is because the size of some images is greater than others, but is there any general solution?

 

[Erel]

It is better to upload a small project with the image that demonstrates the issue.

 

[luisro]

Sub Process_Globals
    ' Version 1.3 with markers in the angles
    Dim Left, Top, Right, Bottom, Width As Int
    Dim DeltaDot, Delta, DeltaX, DeltaY, StartX, StartY, MarkerDot, MarkerDot_1 As Int
    Dim fTopLeft, fTopRight, fBottomLeft, fBottomRight, fCenter As Boolean
    Dim colMarker As Int        : colMarker = Colors.RGB(255, 215, 0)
    Public PixelScale As Double
    Dim Chooser As ContentChooser
End Sub

Sub Globals
    Private btnSaveCroped As Button
    Dim imvImage As ImageView
    Dim pnlAction As Panel
    Dim cvsAction As Canvas
    Dim rectImage, rectOuter As Rect
End Sub

Sub Activity_Create(FirstTime As Boolean)

Activity.Loadlayout("1") 

End Sub

Sub chooser_Result (Success As Boolean, Dir As String, FileName As String)
    imvImage.Initialize("")
    Activity.AddView(imvImage, 0, 20%y, 100%x, 67%x)
    imvImage.Bitmap= LoadBitmap(File.DirAssets, "image0.jpg")
    imvImage.Gravity = Gravity.FILL

    pnlAction.Initialize("pnlAction")
    Activity.AddView(pnlAction, 0, 0, 100%x, 100%y )
    pnlAction.Color = Colors.ARGB(128, 0, 0, 0)
    cvsAction.Initialize(pnlAction)

    btnShow.Initialize("btnShow")
    Activity.AddView(btnShow, 50%x - 75dip, 100%y - 60dip, 150dip, 50dip)
    btnShow.Text = "Show image"

    Width = imvImage.Height
    Top = imvImage.Top
    Bottom = Top + Width
    Left = 50%x - Width / 2
    Right = Left + Width
    rectImage.Initialize(Left, Top, Right, Bottom)    ' square of croped bitmap
    rectOuter.Initialize(Left, Top, Right, Bottom)    ' outer square including the markers
    cvsAction.DrawRect(rectImage, Colors.Transparent, True , 1)    ' draws the transparent croped square

    DeltaDot = 10dip                            ' half of selection square
    MarkerDot = 6dip                            ' half of marker square
    MarkerDot_1 = MarkerDot + 1        ' half of marker square + 1 for outer square

    PixelScale = imvImage.Width / imvImage.Width
End Sub

Sub Button1_Click
    Chooser.Initialize("chooser")
    Chooser.Show("image/*", "Select an image")
End Sub


Sub Activity_Resume

End Sub

Sub Activity_Pause (UserClosed As Boolean)

End Sub

Sub pnlAction_Touch (Action As Int, X As Float, Y As Float)
    Select Action
    Case Activity.ACTION_DOWN
        fTopLeft = False
        fTopRight = False
        fBottomLeft = False
        fBottomRight = False
        fCenter = False
        If X >= Left - DeltaDot And X <= Left + DeltaDot And Y >= Top - DeltaDot And Y <= Top + DeltaDot Then
            fTopLeft = True
            Activity.Title = "TopLeft"
        Else If X >= Left - DeltaDot And X <= Left + DeltaDot And Y >= Bottom - DeltaDot And Y <= Bottom + DeltaDot Then
            fBottomLeft = True
            Activity.Title = "BottomLeft"
        Else If X >= Right - DeltaDot And X <= Right + DeltaDot And Y >= Top - DeltaDot And Y <= Top + DeltaDot Then
            fTopRight = True
            Activity.Title = "TopRight"
        Else If X >= Right - DeltaDot And X <= Right + DeltaDot And Y >= Bottom - DeltaDot And Y <= Bottom + DeltaDot Then
            fBottomRight = True
            Activity.Title = "BottomRight"
        Else If X >= Left + DeltaDot And X < Right - DeltaDot And Y >= Top + DeltaDot And Y < Bottom - DeltaDot Then
            fCenter = True
            Activity.Title = "Center"
        End If    
        StartX = X
        StartY = Y
    Case Activity.ACTION_MOVE
        Dim Diff, Sign As Int
        DeltaX = X - StartX
        DeltaY = Y - StartY
        If Abs(DeltaX) >= Abs(DeltaY) Then
            Delta = DeltaX
        Else
            Delta = DeltaY
        End If
        cvsAction.DrawRect(rectOuter, Colors.Transparent, True , 1)
        cvsAction.DrawRect(rectOuter, Colors.ARGB(128, 0, 0, 0), True , 1)
        pnlAction.Invalidate2(rectOuter)
        If fCenter = True Then
            rectImage.Left = Left + DeltaX
            rectImage.Right = Right + DeltaX
            rectImage.Top = Top + DeltaY
            rectImage.Bottom = Bottom + DeltaY
            If rectImage.Left < imvImage.Left Then
                Diff = imvImage.Left - rectImage.Left
                rectImage.Left = imvImage.Left
                rectImage.Right = rectImage.Right + Diff
            End If
            If rectImage.Top < imvImage.Top Then
                Diff = imvImage.Top - rectImage.Top
                rectImage.Top = imvImage.Top
                rectImage.Bottom  = rectImage.Bottom + Diff
            End If
            If rectImage.Right >  imvImage.Left + imvImage.Width Then
                Diff = rectImage.Right - (imvImage.Left + imvImage.Width)
                rectImage.Right = imvImage.Left + imvImage.Width
                rectImage.Left  = rectImage.Left - Diff
            End If
            If rectImage.Bottom > imvImage.Top + imvImage.Height Then
                Diff = rectImage.Bottom - (imvImage.Top + imvImage.Height)
                rectImage.Bottom = imvImage.Top + imvImage.Height
                rectImage.Top  = rectImage.Top - Diff
            End If
        Else
            If fTopLeft = True Then
                If Left + Delta > imvImage.Left And Top + Delta > imvImage.Top Then
                    rectImage.Left = Left + Delta
                    rectImage.Top = Top + Delta
                End If
            End If
            If fTopRight = True And DeltaX <> 0 Then
                Sign = DeltaY / Abs(DeltaY)
                If Abs(DeltaX) >= Abs(DeltaY) Then
                    Delta = Abs(DeltaX) * Sign
                Else
                    Delta = DeltaY
                End If
                If Top + Delta > imvImage.Top And Right - Delta < imvImage.Left + imvImage.Width Then
                    rectImage.Top = Top + Delta
                    rectImage.Right = Right - Delta
                End If
            End If
            If fBottomLeft = True Then
                Sign = DeltaY / Abs(DeltaY)
                If Abs(DeltaX) >= Abs(DeltaY) Then
                    Delta = Abs(DeltaX) * Sign
                Else
                    Delta = DeltaY
                End If
                If Bottom + Delta < imvImage.Top + imvImage.Height And Left - Delta > imvImage.Left Then
                    rectImage.Bottom = Bottom + Delta
                    rectImage.Left = Left - Delta
                End If
            End If
            If fBottomRight = True Then
                If Bottom + Delta < imvImage.Top + imvImage.Height And Right + Delta < imvImage.Left + imvImage.Width Then
                    rectImage.Bottom = Bottom + Delta
                    rectImage.Right = Right + Delta
                End If
            End If
        End If
        cvsAction.DrawRect(rectImage, Colors.Transparent, True , 1)
        pnlAction.Invalidate2(rectImage)
        rectOuter.Initialize(rectImage.Left - MarkerDot_1, rectImage.Top - MarkerDot_1, rectImage.Right + MarkerDot_1, rectImage.Bottom + MarkerDot_1)
    Case Activity.ACTION_UP
        Left = rectImage.Left
        Top = rectImage.Top
        Right = rectImage.Right
        Bottom = rectImage.Bottom
        Activity.Title = ""
    End Select
End Sub

Private Sub GetImageCut

  """ !!Process To store the cut image, without resizing it Or distorting it just cut what you see inside the frame."""

End Sub

Private Sub btnShow_Click
    Dim imageCut As ImageView
    imageCut.Initialize("")
    Activity.AddView(imageCut, 0, 0, 100%y, 100%x)
    imageCut.Gravity = Gravity.FILL
End Sub

I would like to use this code since if I resize the image sometimes it does not take the picture of the picture correctly.

So I just want to cut what's in the box and store it in a new image variable.

Thank you Mr. Ezrel really is very attentive to all users.

 

[DonManfred]

I would like to use this code

Where is the project (and the image)?

It is better to upload a small project with the image that demonstrates the issue.

 

[klaus]

How do you expect us to help you if you don't provide us with a project showing the whole problem?
That's the only concrete and effient way to help, because we know exactly what you have done, how you have done it and test the project in the same conditions as you do.

 

[luisro]

Excuse me, here is the project, the only thing that changed was the image (Image0), Here we see the problem that the focus of the picture does not match the one that records the image when moving or touching it.

 

[klaus]

The problem is that the width / height ratio of the image and the ImageView are not the same!
Attached, you find a modified version.
The size and position are calculated for your image, not a general calculation for any image.
This example shows once more why I and others we always ask for a project to help.

I removed the zip file, a new one is in post#11.

 

[luisro]

It works perfectly with the specific image attached in the previous project, but, when modifying the project a little and loading any image of our gallery, still gives the same problem, the focus box does not match the image to cut.

At this point I wanted to arrive with the code copied in the top of the thread.

My intention is for the user to take his photo, have some parameters specific to the cut of the image, and can upload his photo to measure.

1. A limiting cut size.
2. Ada to the different sizes of the different photos and images to proceed to the cut.

With these details may culminate my project, which will then be attached to hear your criticism.

POST. Just not taking me is the bottom of the images.

 

[klaus]

... when modifying the project a little and loading any image of our gallery, still gives the same problem, the focus box does not match the image to cut.

I know. That's the reason why I wrote The size and position are calculated for your image, not a general calculation for any image. in my previous post. What you need to do is:
1) Get the width / height ratio of the bitmap.
2) Define the max width and max height for the ImageView imvImage. This will also depend if you want the application in portrait and landscape.
3) Calculate if you can use either max width or max heiht for imvImage depending on the width / height ratio.
4) Calcuate Left, Top, Width, Height of imvImage.
5) Calculate the rectangle for the croping.

Now I let it up to you to write the code, you can look at the difference between the projects in post #6 and post #7.

 

[luisro]

Thank you very much klaus, I'm not an expert, I do not know where to start, I'll try. saludos mis panas.

 

[klaus]

Here you are. Attached you find an improved version.

 

[luisro]

its beautiful, you are a genious.