# 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:** 3

<div class="post-metadata">

### Author: ![luv.ak.tech](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/luv.ak.tech/32/104896_2.png) [@luv.ak.tech](https://community.thunkable.com/u/luv.ak.tech)
#### Post date: [June 11, 2021, 3:49pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/41 "2021-06-11T15:49:12Z")

</div>

i have a question why use cloudinary when you have base64?

---

<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 11, 2021, 3:49pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/42 "2021-06-11T15:49:36Z")

</div>

I’m sorry, I don’t get you?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 3:51pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/43 "2021-06-11T15:51:41Z")

</div>

So this is a long shot but you might be able to upload the base64 text string and convert it to an image url using this:

`https://codebeautify.org/base64-to-image-converter?input=`

If you add your base64 string after the equals sign, it should return an image.

---

<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 11, 2021, 3:52pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/44 "2021-06-11T15:52:16Z")

</div>

Wow, that is cool! Is that a web viewer URL or an API?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 3:53pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/45 "2021-06-11T15:53:50Z")

</div>

Good question. I’m fairly certain it will work as an API. When I tested it, though, it complained the header was too long. [That site](https://codebeautify.org/base64-to-image-converter) works fine if you paste base64 into it… just not sure it works as a long url in a browser on in Thunkable.

My test string was 266,836 chars long! 😖

---

<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 11, 2021, 3:55pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/46 "2021-06-11T15:55:19Z")

</div>

Yeah, I just tried it by pasting my Base64 URL along with that in Google, and this is what I got:  
 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/f/f/ffee615ddb5274e476a07535de43ef263ee46d2a.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 11, 2021, 3:55pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/47 "2021-06-11T15:55:52Z")

</div>

Haha, mine was 100148…

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 3:55pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/48 "2021-06-11T15:55:55Z")

</div>

That site is one my favorites for API/JSON viewing but they don’t seem to have an API as far as I can tell.

---

<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 11, 2021, 3:56pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/49 "2021-06-11T15:56:40Z")

</div>

I use that site too for JSON… re all base64 urls that long or could we find a shorter one for testing?

---

<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 11, 2021, 4:00pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/50 "2021-06-11T16:00:07Z")

</div>

Argh. Do you have any other ideas on how I can send my canvas to the Open OCR API?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 4:01pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/51 "2021-06-11T16:01:55Z")

</div>

Well, my thought was to find an API that will convert from base64 to image and then get the image url and feed it into your OCR API. There may be other APIs that will do that conversion.

---

<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 11, 2021, 4:02pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/52 "2021-06-11T16:02:16Z")

</div>

I’ve been searching, I can’t find a thing.

---

<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 11, 2021, 4:03pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/53 "2021-06-11T16:03:03Z")

</div>

@codeswept  
Just to follow up. I was mistaken about the Google sheet workaround. You cannot fit a too long string in a single cell in Google sheet.

---

<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 11, 2021, 4:17pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/54 "2021-06-11T16:17:43Z")

</div>

I looked at this @tatiang but I haven’t ever worked with POST calls, only GET calls… @drted did you have any success with this?

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 4:24pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/55 "2021-06-11T16:24:05Z")

</div>

I actually have one more idea. I found an [API that takes HTML](https://docs.htmlcsstoimage.com/getting-started/using-the-api/#creating-an-image) and [another reference](https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html) that says you can upload base64 within an ![]() tag. It’s complicated but if Thunkable ever works again 😬 I can try it and let you know.

---

<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 11, 2021, 4:26pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/56 "2021-06-11T16:26:45Z")

</div>

Thunkable still working for me thankfully.

 ![image](https://us1.discourse-cdn.com/flex015/uploads/thunkable/original/3X/1/8/1896796fa33ced5c102895628c3e17583a75d5d9.png)  
A **fully qualified** url is required, does the data:image/ link count as that? If I try to put that sort of link in an image component it doesn’t work 97% of time.

---

<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 11, 2021, 4:28pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/57 "2021-06-11T16:28:39Z")

</div>

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

---

<div class="post-metadata">

### Author: ![tatiang](https://sea1.discourse-cdn.com/flex015/user_avatar/community.thunkable.com/tatiang/32/55482_2.png) [@tatiang](https://community.thunkable.com/u/tatiang)
#### Post date: [June 11, 2021, 4:29pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/58 "2021-06-11T16:29:40Z")

</div>

You need to embed the base64 string inside an `img src` tag and then upload it to the API as **html**.

It will look something like this:

```auto
<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MEVBMTczNDg3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MEVBMTczNDk3QzA5MTFFNjk3ODM5NjQyRjE2RjA3QTkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDowRUExNzM0NjdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDowRUExNzM0NzdDMDkxMUU2OTc4Mzk2NDJGMTZGMDdBOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PjjUmssAAAGASURBVHjatJaxTsMwEIbpIzDA6FaMMPYJkDKzVYU+QFeEGPIKfYU8AETkCYI6wANkZQwIKRNDB1hA0Jrf0rk6WXZ8BvWkb4kv99vn89kDrfVexBSYgVNwDA7AN+jAK3gEd+AlGMGIBFDgFvzouK3JV/lihQTOwLtOtw9wIRG5pJn91Tbgqk9kSk7GViADrTD4HCyZ0NQnomi51sb0fUyCMQEbp2WpU67IjfNjwcYyoUDhjJVcZBjYBy40j4wXgaobWoe8Z6Y80CJBwFpunepIzt2AUgFjtXXshNXjVmMh+K+zzp/CMs0CqeuzrxSRpbOKfdCkiMTS1VBQ41uxMyQR2qbrXiiwYN3ACh1FDmsdK2Eu4J6Tlo31dYVtCY88h5ELZIJJ+IRMzBHfyJINrigNkt5VsRiub9nXICdsYyVd2NcVvA3ScE5t2rb5JuEeyZnAhmLt9NK63vX1O5Pe8XaPSuGq1uTrfUgMEp9EJ+CQvr+BJ/AAKvAcCiAR+bf9CjAAluzmdX4AEIIAAAAASUVORK5CYII=">

```

---

<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 11, 2021, 4:31pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/59 "2021-06-11T16:31:12Z")

</div>

Interesting. Let me check it out. As I said, I have 0 experience with POST commands, but I’ll try it out now.

---

<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 11, 2021, 4:31pm UTC](https://community.thunkable.com/t/uploading-an-image-of-a-canvas-to-cloudinary/989016/60 "2021-06-11T16:31:59Z")

</div>

What will I be required to fill out in the url parameter, then?

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

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