B4J Question [BANano] [SOLVED] Putting a border on base64 images

Mashiane · Aug 22, 2024

Hi

B4X:

#if javascript
function addBorderToBase64Image(base64Image, borderSize) {
    return new Promise((resolve, reject) => {
        // Hard-coded border color
        const borderColor = 'black';

        // Create a new Image element
        const img = new Image();
        
        // Set the image source to the base64 string
        img.src = base64Image;

        // Once the image is loaded
        img.onload = function () {
            // Create a canvas element
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');

            // Set the canvas size (image size + borderSize on all sides)
            canvas.width = img.width + borderSize * 2;  // Add borderSize on both left and right sides
            canvas.height = img.height + borderSize * 2; // Add borderSize on both top and bottom sides

            // Draw the border
            ctx.fillStyle = borderColor;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // Draw the image inside the canvas with the border size offset to account for the border
            ctx.drawImage(img, borderSize, borderSize);

            // Get the new base64 image string from the canvas
            const newBase64Image = canvas.toDataURL();

            // Resolve the promise with the new base64 image string
            resolve(newBase64Image);
        };

        // Handle image load error
        img.onerror = function (err) {
            reject(base64Image);
        };
    });
}
#End If

My translation..

I kindly request help making this a promise function with banano as demonstrated above.

B4X:

Sub AddBorderOnBase64Image(base64 As String, borderSize As Int) As String
    Dim base64WithBorder As String = ""
    'initialize the image
    Dim img As BANanoObject
    img.Initialize2("Image", Null)
    'set the onload event
    Dim event As BANanoEvent
    ' when loaded...
    img.AddEventListenerOpen("onload", Array(event))
    Dim imgW As Int = img.GetField("width")
    Dim imgH As Int = img.GetField("height")
    imgW = banano.parseInt(imgW) + (banano.parseInt(borderSize) * 2)
    imgH = banano.parseInt(imgH) + (banano.parseInt(borderSize) * 2)
    '
    Dim canvasE As BANanoElement = banano.CreateElement("canvas")
    Dim canvas As BANanoObject = canvasE.ToObject
    Dim ctx As BANanoObject = canvas.RunMethod("getContext", "2d")
    '
    canvas.SetField("width", imgW)
    canvas.SetField("height", imgH)
    Dim cW As Int = canvas.GetField("width")
    Dim cH As Int = canvas.GetField("height")
    '
    ctx.SetField("fillStyle", "black")
    ctx.RunMethod("fillRect", Array(0, 0, cW, cH))
    '
    ctx.RunMethod("drawImage", Array(img, borderSize, borderSize))
    '
    base64WithBorder = canvas.RunMethod("toDataURL", "image/jpeg").Result
    ' closing the 'onload' event listener function
    img.CloseEventListener
    img.SetField("src", base64)
    Return base64WithBorder
End Sub

Thanks in advance

alwaysbusy · Aug 22, 2024

I would write it something like this:

B4X:

' HERE STARTS YOUR APP
Sub BANano_Ready()
    Dim Base64Image As String = GetDemoImageData
    Dim result As String

    ' call and wait for the promise
    Try
        result = BANano.Await(AddBorderToBase64Image(Base64Image, 5))
        ' with border
        Log(result)
    Catch(result)
        ' the original as something went wrong
        Log(result)
    End Try   
   
    ' continue the rest of the code
    Log("Done")
End Sub

Sub AddBorderToBase64Image(Base64Image As String, borderSize As Int) As BANanoPromise
    ' make the promise and return the result
    Dim prom As BANanoPromise 'ignore
    prom.CallSub(Me, "AddBorderToBase64ImageWait", Array(Base64Image, borderSize))
    Return prom
End Sub

Sub AddBorderToBase64ImageWait(base64Image As String, borderSize As Int) ' ...Wait to make it an async method   
    Dim borderColor As String = "black"   
   
    Dim img As BANanoObject
    img.Initialize2("Image", Null)
   
    img.SetField("src", base64Image)
   
    Dim LoadFunction As BANanoObject
    LoadFunction.Sub(Null)
        Dim Canvas As BANanoElement = BANano.CreateElement("canvas")
        Dim CanvasObj As BANanoObject = Canvas.ToObject
        Dim ctx As BANanoObject = CanvasObj.RunMethod("getContext", "2d")
       
        CanvasObj.SetField("width", BANano.parseInt(img.GetField("width")) + borderSize * 2)
        CanvasObj.SetField("height", BANano.parseInt(img.GetField("height")) + borderSize * 2)
       
        ctx.SetField("fillStyle", borderColor)
        ctx.RunMethod("fillRect", Array(0, 0, CanvasObj.GetField("width"), CanvasObj.GetField("height")))
       
        ctx.RunMethod("drawImage", Array(img, borderSize, borderSize))
       
        ' return the image with border
        BANano.ReturnThen(CanvasObj.RunMethod("toDataURL", "image/jpeg").Result)
    LoadFunction.EndSub
   
    Dim ErrorFunction As BANanoObject
    ErrorFunction.Sub(Null)
        ' return the original
        BANano.ReturnElse(base64Image)
    ErrorFunction.EndSub
   
    img.SetField("onload", LoadFunction)   
    img.SetField("onerror", ErrorFunction)
End Sub

public Sub GetDemoImageData() As String
    Return "data:image/jpeg;base64,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"
End Sub

Alwaysbusy

alwaysbusy · Aug 22, 2024

I just realize it can actually even be without the Wait method:

B4X:

Sub AddBorderToBase64Image(Base64Image As String, borderSize As Int) As BANanoPromise
    ' make the promise and return the result
    Dim prom As BANanoPromise 'ignore
    prom.NewStart
        Dim borderColor As String = "black"
       
        Dim img As BANanoObject
        img.Initialize2("Image", Null)
       
        img.SetField("src", Base64Image)
       
        Dim LoadFunction As BANanoObject
        LoadFunction.Sub(Null)
            Dim Canvas As BANanoElement = BANano.CreateElement("canvas")
            Dim CanvasObj As BANanoObject = Canvas.ToObject
            Dim ctx As BANanoObject = CanvasObj.RunMethod("getContext", "2d")
               
            CanvasObj.SetField("width", BANano.parseInt(img.GetField("width")) + borderSize * 2)
            CanvasObj.SetField("height", BANano.parseInt(img.GetField("height")) + borderSize * 2)
               
            ctx.SetField("fillStyle", borderColor)
            ctx.RunMethod("fillRect", Array(0, 0, CanvasObj.GetField("width"), CanvasObj.GetField("height")))
               
            ctx.RunMethod("drawImage", Array(img, borderSize, borderSize))
               
            ' return the image with border
            BANano.ReturnThen(CanvasObj.RunMethod("toDataURL", "image/jpeg").Result)
        LoadFunction.EndSub
       
        Dim ErrorFunction As BANanoObject
        ErrorFunction.Sub(Null)
            ' return the original
            BANano.ReturnElse(Base64Image)
        ErrorFunction.EndSub
       
        img.SetField("onload", LoadFunction)
        img.SetField("onerror", ErrorFunction)   
    prom.NewEnd
    Return prom
End Sub

Alwaysbusy

Mashiane · Aug 22, 2024

alwaysbusy said:

I just realize it can actually even be without the Inner method:

B4X:

Sub AddBorderToBase64Image(Base64Image As String, borderSize As Int) As BANanoPromise
    ' make the promise and return the result
    Dim prom As BANanoPromise 'ignore
    prom.NewStart
        Dim borderColor As String = "black"
       
        Dim img As BANanoObject
        img.Initialize2("Image", Null)
       
        img.SetField("src", Base64Image)
       
        Dim LoadFunction As BANanoObject
        LoadFunction.Sub(Null)
            Dim Canvas As BANanoElement = BANano.CreateElement("canvas")
            Dim CanvasObj As BANanoObject = Canvas.ToObject
            Dim ctx As BANanoObject = CanvasObj.RunMethod("getContext", "2d")
               
            CanvasObj.SetField("width", BANano.parseInt(img.GetField("width")) + borderSize * 2)
            CanvasObj.SetField("height", BANano.parseInt(img.GetField("height")) + borderSize * 2)
               
            ctx.SetField("fillStyle", borderColor)
            ctx.RunMethod("fillRect", Array(0, 0, CanvasObj.GetField("width"), CanvasObj.GetField("height")))
               
            ctx.RunMethod("drawImage", Array(img, borderSize, borderSize))
               
            ' return the image with border
            BANano.ReturnThen(CanvasObj.RunMethod("toDataURL", "image/jpeg").Result)
        LoadFunction.EndSub
       
        Dim ErrorFunction As BANanoObject
        ErrorFunction.Sub(Null)
            ' return the original
            BANano.ReturnElse(Base64Image)
        ErrorFunction.EndSub
       
        img.SetField("onload", LoadFunction)
        img.SetField("onerror", ErrorFunction)   
    prom.NewEnd
    Return prom
End Sub

Alwaysbusy

Awesome, thank you so much. I like this 2nd implementation better. Sometimes the translation from JS to BANano can be very elusive, especially the BANanoPromise object, for me. Seeing this version makes it easier to grasp.

B4J Question [BANano] [SOLVED] Putting a border on base64 images

Mashiane

Expert

alwaysbusy

alwaysbusy

Expert

alwaysbusy

Expert

Mashiane

Expert

Similar Threads