Uploading an image of a canvas to cloudinary

Questions about Thunkable
21

Hi @jane , I’m working on an app for little kids to learn writing. The app displays a letter for them to write, and they have to write it on the canvas. Then I want to use the OCR API to get the text they have written on the canvas, and check whether they have written the letter correctly/ written the same letter. Since the ocr api won’t accept the canvas image directly, I wanted to upload it to cloudinary and use the URL with the api, but cloudinary doesn’t accept base64 either. I’m able to connect the generate JSON from object block now, and display it in an input… Here it is:

Edit: When I tried to post the response, I crossed the 32,000 character limit because I had 100,000+. The response is in the next post.

Any ideas?
Thanks

22

Argh, the response is 100148 characters, how do I post it?

23

Does the OCR API require base64 format? Or can you just send it the Cloudinary mediaURL?

1 Like
24

Put it in a Google Doc and post a link to it?

1 Like
25

That’s a great idea! I’ll do it.

26
27

Exactly what I want to do. I don’t think the api accepts Base64, so I want to upload it to cloudinary.

28

I’m not sure what the hold up is then. It’s pretty straightforward to upload an image to Cloudinary. And there’s a block to get an image from the canvas. And if the API will take a url as input… which part do you need help with?

2 Likes
29

image

This doesn’t work. I get [object Object] in the input. And the response I get when I try to parse that is in the google doc above.

1 Like
30

Media_DB expects a local path for the image and yours doesn’t have one.

I can think of 3 workarounds

  • Create a web viewer extension to save the image as a file and then use this file in your API or to upload to cloudinary to get the URL and work with it.

  • Because Base64 is considered as text, you can save it as a value under a key in Firebase and then create a Firebase function to move it from Realtime DB to Firebase storage and this will return a URL which you can use.

  • Save it to a Google sheet then use any of the extensions such as Zapeir/Integromat/IFTTT to upload it to a cloud storage and get the URL.

1 Like
31

Ohhh. I don’t know much JS and I don’t know how to conduct firebase functions.

1 Like
32

You still have the third option.

1 Like
33

Any examples of cloud storages I can use?

1 Like
34

Cloudinary, Google drive, OneDrive, Imgur,…

1 Like
35

Oh, so basically cloudinary will accept base64 if it is sent through a third party and not the cloudinary component?

1 Like
36

Why would you save it as Base64 if you can save it as an image.

But yes, cloudinary will accept Base64.

1 Like
37

Oh, ok. Thanks! I’ll try that out tomorrow.

1 Like
38

Okay, I think I missed a crucial point from this topic:

this block returns a canvas image in base64 text format

I didn’t realize that the image of Canvas block was converting to base64. I’m curious if/why that’s different than using the green Photo block.

1 Like
39

I get a link that’s not even valid when I keep the image of canvas1 block in a text input.

40

This isn’t a problem when used with the SHARE IMAGE block, but it is a problem when used with the cloudinary block. Weird…