# Uploading an image of a canvas to cloudinary

**URL:** <https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016>\
**Category:** Questions about Thunkable X\
**Created:** [November 21, 2020, 7:22am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016 "2020-11-21T07:22:59Z")\
**Posts on this page:** 20\
**Page:** 5

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 12, 2021, 11:58am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/81 "2021-06-12T11:58:19Z")

</div>

But I’m unable to attach the create object block to the body.

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 12, 2021, 12:02pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/82 "2021-06-12T12:02:23Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/6/b6b9cb6d8ac554be0fa2017db3f427a33577e8ff.png)

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 12, 2021, 12:02pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/83 "2021-06-12T12:02:47Z")

</div>

Oh, ok. My bad.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 12, 2021, 12:06pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/84 "2021-06-12T12:06:33Z")

</div>

No, it still doesn’t work. Could I share the link with you and you try it?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 12, 2021, 12:07pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/85 "2021-06-12T12:07:47Z")

</div>

Sure. I’ll be happy to help.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 12, 2021, 12:08pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/86 "2021-06-12T12:08:07Z")

</div>

Thanks! Sending the link via PM

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 12, 2021, 12:30pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/87 "2021-06-12T12:30:52Z")

</div>

![Screenshot_20210612_152956_com.thunkable.live](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/b/a/ba057e286cc0726863b9f458c09e1a7a03157885.jpeg)

Success

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 12, 2021, 4:37pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/88 "2021-06-12T16:37:32Z")

</div>

Any suggestions?

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/2/f2ec6658c9301ceddc5701406ceeaf8e36e1bbd8.png)

This doesn’t work

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 12, 2021, 4:41pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/89 "2021-06-12T16:41:14Z")

</div>

I replaced the `image of Canvas1` with the Base64 test file from the website of the API provider but the message continues to show up.

**[Edit]**  
I used the test file in `postman` and I was able to get the result. It must be a parameter or the internal conversion in Thunkable is producing characters that produce errors in the API verification process.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 27, 2021, 8:00am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/90 "2021-06-27T08:00:34Z")

</div>

I’ve been looking at some different APIs but can’t seem to find anything, so I got back to trying to crack this API open but to no avail.

 ![Screen Shot 2021-06-27 at 1.29.03 PM](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/7/e7213e37584f1a58a7cfc56e670ae804677f173e.png)

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 27, 2021, 7:10pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/91 "2021-06-27T19:10:21Z")

</div>

The problem is not in the API. I tested it using `Postman` and passed a Base64 block and It worked. I also made a quick JavaScript/html and tested the same and it also worked.

It seems Thunkable passes some extra settings or passes the API in a certain way making it unworkable. I found it the same for other few APIs.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 28, 2021, 6:01am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/92 "2021-06-28T06:01:07Z")

</div>

So would I have to post the URL through a webviewer and then have the web viewer send a message back?

---

<div class="post-metadata">

**Author:** ![muneer](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/muneer/32/75210_2.png) [@muneer](https://community.thunkable.com/u/muneer)\
**Post date:** [June 28, 2021, 6:31am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/93 "2021-06-28T06:31:03Z")

</div>

Actually, the whole adventure started because we don’t have a URL for the image. We only have a Base64 block.

Should we have a URL, then the standard Thunkable component would suffice.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 28, 2021, 6:34am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/94 "2021-06-28T06:34:48Z")

</div>

Yeah… I’ve looked on Google for APIs to convert base64 to actual image URLs but can’t find any. I saw @manyone’s topic on a bas64 converter/decoder. I looked at the code and thought I could maybe use the same could for my app, but it didn’t work out:

- I placed the base64 image in a text input.
- I copied the string and placed it in the text input of @manyone’s app.
- It didn’t return anything.

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [June 28, 2021, 6:50am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/95 "2021-06-28T06:50:02Z")

</div>

@actech has done it before:

> [@Use base64 encoded images](https://community.thunkable.com/t/use-base64-encoded-images/35254/6):
>
> You can ask, why should I encode images in base64 format, if I can add many files to the project at once? Because in some cases it’s more convenient to work with base64 - you can quickly update a huge amount of images in the project and get additional information about them (width, height, color depth, type, etc., that you want to add using the script). Below is a php script that displays in the browser window text in base64 format for all graphics files in the specified (“sourceimages”) direc…

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [June 28, 2021, 6:52am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/96 "2021-06-28T06:52:26Z")

</div>

you may have already found a site like this but this one can do encode decode between images and base64

[https://www.base64decode.net/base64-image-decoder](https://www.base64decode.net/base64-image-decoder)

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 28, 2021, 6:54am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/97 "2021-06-28T06:54:09Z")

</div>

That’s interesting! But it doesn’t have an API. What I’m trying to do is ask the users to write something on a canvas, and then send it to an OCR API, read the text, and then check if it matches what the user was supposed to write. But the OCR API doesn’t accept base64 by itself, so I want to decode the API to get a proper URL.

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 28, 2021, 6:56am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/98 "2021-06-28T06:56:17Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/2/f/2f7d4b7e1968a33b432511370f61727af8bb641d.png)  
But if this really works, than I can create a data source of this table, loop through it, and replace every single ‘value’ with ‘char’. Or does it work the other way around?

---

<div class="post-metadata">

**Author:** ![codeswept](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/codeswept/32/87755_2.png) [@codeswept](https://community.thunkable.com/u/codeswept)\
**Post date:** [June 28, 2021, 7:13am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/99 "2021-06-28T07:13:12Z")

</div>

![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/d/2/d2eeabedbcc7f4d7b12951cc9a6170a46ac98060.png)  
Tried this, it doesn’t work (big surprise!)

I pasted var decoded into google, it said ‘request too large’. I replaced the characters the other way around (replace value with char), and I got a black screen with a tiny white box in the middle.

---

<div class="post-metadata">

**Author:** ![manyone](https://avatars.discourse-cdn.com/v4/letter/m/ee59a6/32.png) [@manyone](https://community.thunkable.com/u/manyone)\
**Post date:** [June 28, 2021, 7:25am UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/100 "2021-06-28T07:25:37Z")

</div>

it doesn’t quite work that way. when you convert an image to base64 - it’s like taking each pixel’s RGB elements plus transparency and converting it to the bit notation that base64 requires. so two people handwriting a number 1, or even something as simple as a dot (period) would consist of several dozen bits and they couldn’t possibly have the same bit pattern (and that’s just a dot!). so their OCR’s won’t match and neither ot them will match the OCR of a “perfect/standard” dot somewhere for comparison. base64 conversion will never achieve that.

these two dots look the same …  
 ![dot1](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/e/0/e056273e526426b537451f948441a0f437193dcb.jpeg)  
 ![dot2](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/d/1db0e6044c97ff7ddaaf563d6a80e4df86b1171f.jpeg)

…but wait till you see how well (?) the base64 translations compare to each other!

what you need is something bordering on machine learning and artificial intelligence - the reason some computers can recognize when you write the number , say 2, is because the distribution of the little pixels comprising the number is a close match of a pattern averaged out of several hundreds of thousands of people writing the same number 2. (and that doesn’t even try to match the speed and direction of the dots). matching handwritten input isn’t as simple as comparing base64 - i’m sorry to say - i don’t mean to disappoint you. but keep your curiosity level up. it’s the stuff that drive is made of. don’t be discouraged! someday after you finish more courses in math, machine learning and artificial intelligence will be a piece of cake!

[Previous page](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016.md?page=4)

[Next page](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016.md?page=6)
