# Data:image/jpg;base64 to TF.js

**URL:** <https://discuss.ai.google.dev/t/data-image-jpg-base64-to-tf-js/30397>\
**Category:** TF.js\
**Tags:** api\
**Created:** [April 5, 2023, 10:49am UTC](https://discuss.ai.google.dev/t/data-image-jpg-base64-to-tf-js/30397 "2023-04-05T10:49:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Benjamin\_Woite](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/benjamin_woite/32/11665_2.png) [@Benjamin\_Woite](https://discuss.ai.google.dev/u/Benjamin_Woite)\
**Post date:** [April 5, 2023, 10:49am UTC](https://discuss.ai.google.dev/t/data-image-jpg-base64-to-tf-js/30397/1 "2023-04-05T10:49:12Z")

</div>

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:

```auto
        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:

```auto
      // 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!

---

<div class="post-metadata">

**Author:** ![Shivam\_Mishra](https://d1dlmcr85iqnpo.cloudfront.net/user_avatar/discuss.ai.google.dev/shivam_mishra/32/14113_2.png) [@Shivam\_Mishra](https://discuss.ai.google.dev/u/Shivam_Mishra)\
**Post date:** [September 16, 2024, 2:07pm UTC](https://discuss.ai.google.dev/t/data-image-jpg-base64-to-tf-js/30397/3 "2024-09-16T14:07:59Z")

</div>

Hi @Benjamin_Woite ,

**I apologize for the delay in my response.**

You can follow the example [here](https://gist.github.com/jthomas/145610bdeda2638d94fab9a397eb1f1d#file-script-js-L49) 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!**