Uploading an image of a canvas to cloudinary

Hi! Do you have any solution here?

1 Like

Nope i haven’t found anything yet.

i think we dont need cloudinary if you want a url try making a url like -
data:image/jpeg;base64, + your base 64 string

1 Like

Data schemes do not work on all phones. Have you tried it yourself?

1 Like

no and just found that thunkable returns with data scheme only

Hi there,

I took a look at this post and thought you might find this project interesting.

When you click the Button, it:

  • Saves the image of the canvas as a cloud variables
  • Uses this cloud variable as a source for the Image component in the app
  • Displays the base 64 URL for the image on a Label

This works for me on Android, iOS and web. If it works in your project, you may find it easier to work with than the Cloudinary API. Make sure to connect your own Firebase DB to your project if you end up using this method!

I noticed that your error message in the original post said that it couldn’t upload the image of the Canvas to Cloudinary as it was an Object, but then found that I couldn’t attach a ‘generate JSON from Object’ block directly to the ‘image of Canvas’ block - I’ll mention this to the team.

Thanks,
Jane

3 Likes

@jane is the project available for remix?

1 Like

@jane I’m not able to view it. I think it’s private.

1 Like

@codeswept @muneer Sorry about that! You should be able to view the project now.

2 Likes

Cool, thanks!

2 Likes

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

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

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

1 Like

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

1 Like

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

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

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

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

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