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

[Mashiane]

Hi there

I see there is..

Window: createImageBitmap() method - Web APIs | MDN

The createImageBitmap() method of the Window interface creates a bitmap from a given source, optionally cropped to contain only a portion of that source. It accepts a variety of different image sources, and returns a Promise which resolves to an ImageBitmap.

developer.mozilla.org

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.

 

[alwaysbusy]

Something like this:

    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