Data:image/jpg;base64 to TF.js

TensorFlow Special Interest Groups TF.js
1

Hello,

I got stuck. I tried a thousand ways and can not solve my problem. But I make something wrong.

I’m using an API with a screenshot function. The function has inside the following snippet:

        image = document.getElementById('myImage')
        image.src = `data:image/jpeg;base64,${data}`

I simply want to throw it into the function

model.classify(image).then((predictions) => {}

But whatever I try with blobs or “atob(data)” and so on I simply don’t get it to work.

Just sharing my last attempt:

      // Convert base64 to binary data
        const binaryData = atob(data)
        // Create array buffer from binary data
        const arrayBuffer = new ArrayBuffer(binaryData.length)
        const uint8Array = new Uint8Array(arrayBuffer)
        for (let i = 0; i < binaryData.length; i++) {
          uint8Array[i] = binaryData.charCodeAt(i)
        }
        // Create blob from array buffer
        const myBlob = new Blob([arrayBuffer], {type: 'image/jpeg'})
        const myFile = new File([myBlob], 'image.jpeg', {
          type: myBlob.type,
        })
        image = document.getElementById('myImage')
        image.src = myFile

Thanks in advance!

3

Hi @Benjamin_Woite ,

I apologize for the delay in my response.

You can follow the example here to resolve your issue. It demonstrates how to pass the image data into the model.classify(image) function.

This example uses a MobileNet model, but you can use it with your own model.

Let me know if this helps!

Thank you!