Android Question Best routine to load an image

[LucaMs]

I'd like to have a routine to load an image into a ImageView in the best possible way.

This should be useful when you give users the ability to choose an image (from his device or from other source).

This routine developed by Klaus is already very good.
But I think I saw something different; if necessary, it is taken the main (relevant) part of the chosen image, the middle (center) part.

I can puzzling to create this routine, but I know people who would build it better and faster

 

[Douglas Farias]

you can try the examples posted here by @stevel05 maybe it works for u
https://www.b4x.com/android/forum/threads/fit-image-center-imageview.47848/#content

its for b4j but u can easy change to b4a

 

[LucaMs]

you can try the examples posted here by @stevel05 maybe it works for u
https://www.b4x.com/android/forum/threads/fit-image-center-imageview.47848/#content

its for b4j but u can easy change to b4a

Thank you, Douglas.

I just tried the last zip on that thread (next time, point me directly to that post, LOL) but it seems to me that is does the same of Klaus' routine: you get two vertical black "bands" near the image.

 

[klaus]

Is this what you are looking for ?

Sub Globals
   Private ImageView1, ImageView2, ImageView3, ImageView4 As ImageView
End Sub

Sub Activity_Create(FirstTime As Boolean)
   Activity.LoadLayout("Main")
  
   FitCenterBitmap(ImageView1, File.DirAssets, "rose2.jpg", 1)
   FitCenterBitmap(ImageView2, File.DirAssets, "rose2.jpg", 1)
   FitCenterBitmap(ImageView3, File.DirAssets, "rose2.jpg", 2)
   FitCenterBitmap(ImageView4, File.DirAssets, "rose2.jpg", 2)  
End Sub

Sub FitCenterBitmap(Imv As ImageView, Dir As String, FileName As String, Mode As Int)
    Private bmp As Bitmap = LoadBitmap(Dir, FileName)
    Private cvs As Canvas
    cvs.Initialize(Imv)

    Dim rectDest, rectSource As Rect
    Dim delta As Int
    Select Mode
    Case 1
        If bmp.Width / bmp.Height > Imv.Width / Imv.Height Then
            delta = (Imv.Height - bmp.Height / bmp.Width * Imv.Width) / 2
            rectDest.Initialize(0, delta,Imv.Width, Imv.Height - delta)
        Else
            delta = (Imv.Width - bmp.Width / bmp.Height * Imv.Height) / 2
            rectDest.Initialize(delta, 0, Imv.Width - delta, Imv.Height)
        End If
        cvs.DrawBitmap(bmp, Null, rectDest)
    Case 2
        rectDest.Initialize(0, 0,Imv.Width, Imv.Height)
        If bmp.Width / bmp.Height > Imv.Width / Imv.Height Then
            delta = (bmp.Width - Imv.Width / Imv.Height * bmp.Height) / 2
            rectSource.Initialize(delta, 0,bmp.Width - delta, bmp.Height)
        Else
            delta = (bmp.Height - Imv.Height / Imv.Width * bmp.Width) / 2
            rectSource.Initialize(0, delta, bmp.Width, bmp.Height - delta)
        End If
        cvs.DrawBitmap(bmp, rectSource, rectDest)
    End Select

    Imv.Invalidate
End Sub

Two modes:
Mode 1: upper images the whole image is displayed with bands with the background color of the ImageView,
Mode 2: lower images
The left image shows the whole height of the original image but horizontally the image is cropped.
The right image shows the whole width of the original image but verticaally the image is cropped.

 

[LucaMs]

First of all, many many thanks, Klaus (unfortunately, I cannot add more than one "Like" to your (as usual) excellent work)

Is this what you are looking for ?

I have to answer... I don't know.

I would like to generalize but I try to explain from what (now i know WRONG) point I started.

There is a Web game in which each player has his "avatar" (image).
I can not see the way to add your own image, so I suppose it is taken from your Facebook profile.
I have not an "avatar" image on my FB profile.

In the game, avatars look like this:

No avatar has "gaps" edges. So I assumed that, if you choose an image which has not the same ratio of the avatar, the game (the sw) takes "the" middle part of the image you chosen. Also you could have chosen a picture whose orientation is different from that of the avatar.

So I tried to figure out what can be the best algorithm.

Now I "discovered" some things:

1) Avatar is apparently rectangular but it is square!
2) "Avatars" on Facebook are also square. FB provides you an online tool to fit-center-cut in its "320x320 space" the image you chosen.

However, I am still not sure that the game takes the "FB avatar".


It seems to me that your project does what I asked, anyway

Great job, as always, Klaus.


Thank you.



[Only one detail: how to clear the ImageView? If you call the routine more than one time, DrawBitmap "over draws" the background. I think the first line of the routine should be:
Imv.Bitmap = Null
or
Imv.Colors = [color parameter]
]


P.S.

I can not see the way to add your own image, so I suppose it is taken from your Facebook profile.

I found:
Let me help you change your avatar in the game. Simply update or change the profile picture in your Facebook account and wait for 24 hours.

So, game avatar and FB profile picture have the same ratio (1); this was the "trick" !!! (with the FB tool to... please, read the post)

Now I have "only" the need to create an Activity which does the same job of the FB tool. Very easy