B4J Question [BANano] How can I crop an image in the Assets folder before display/saving as thumbnail?

Mashiane

Expert
Licensed User
Longtime User
Hi there

I see there is..


How can I use that to

1. Get an image from assets folder
2. Crop it?
3. Display cropped image / Save cropped image as thumbnail?

Thanks in advance.
 
Solution
Something like this:

B4X:
    Dim canvasElem As BANanoElement = body.Append($"<canvas id="myCanvas"></canvas>"$).Get("#myCanvas")
    Dim canvasObj As BANanoObject = canvasElem.ToObject.RunMethod("getContext", "2d")
    
    Dim fetch As BANanoFetch
    Dim fetchResponse As BANanoFetchResponse
    Dim blob As BANanoObject
    Dim bitmap As BANanoObject
    fetch.Initialize("./assets/banano.jpg",Null)
    fetch.Then(fetchResponse)
        Return fetchResponse.Blob
    fetch.Then(blob)    
        Dim CreateBitmap As BANanoObject
        CreateBitmap.Initialize("createImageBitmap")    
        Return CreateBitmap.Execute(Array(blob,0, 0, 64, 64)) ' crop from top left, 64 pixels width en height
    fetch.Then(bitmap)...

alwaysbusy

Expert
Licensed User
Longtime User
Something like this:

B4X:
    Dim canvasElem As BANanoElement = body.Append($"<canvas id="myCanvas"></canvas>"$).Get("#myCanvas")
    Dim canvasObj As BANanoObject = canvasElem.ToObject.RunMethod("getContext", "2d")
    
    Dim fetch As BANanoFetch
    Dim fetchResponse As BANanoFetchResponse
    Dim blob As BANanoObject
    Dim bitmap As BANanoObject
    fetch.Initialize("./assets/banano.jpg",Null)
    fetch.Then(fetchResponse)
        Return fetchResponse.Blob
    fetch.Then(blob)    
        Dim CreateBitmap As BANanoObject
        CreateBitmap.Initialize("createImageBitmap")    
        Return CreateBitmap.Execute(Array(blob,0, 0, 64, 64)) ' crop from top left, 64 pixels width en height
    fetch.Then(bitmap)
        canvasObj.RunMethod("drawImage", Array(bitmap,0,0))        
        Dim data As String = canvasElem.ToObject.RunMethod("toDataURL", Null).Result
        ' and then upload this base64 data back to your server and save it there to a file
        ...
    fetch.End

Alwaysbusy
 
Upvote 1
Solution
Cookies are required to use this site. You must accept them to continue using the site. Learn more…