Save Canvas Image to your Google drive

Tutorials and DIY Guides
,
1

For this tutorial you will need to code a short script in Google Apps Script which you can access it from within Google Drive.

You will need to use Web API component to talk to the script you created in Google Apps Script and pass the parameters using the Query Parameter section the the Body section. The Base64 image cannot fit into the Query Parameter section and therefore will will need to pass it using the Body section of the Web API.

The Thunkable project is very simple and is used to demonstrate the idea but you are free to use it in whatever idea that would fit your project.

The project basically consists of a canvas, a clear button to clear the canvas and a save button to save the scribbles in the canvas.
The blocks are:
image

and:

image
image901×500 58.5 KB

The above is all the code needed for the demonstration.

In Google Drive, open the script editor and add this code

function doPost(event) {
  var filename = event.parameter.imageFile;
  var imageData = event.postData.getDataAsString();
  var blobNew = Utilities.newBlob(Utilities.base64Decode(imageData),'image/png',filename);
  DriveApp.createFile(blobNew);
};

Save it and Deploy it with the option to be accessed by everyone.

image
image760×598 24.9 KB

Use the URL of the deployed Google web app to be the URL of your Web API component in the project.

Run the Thunkable project and see that your image is saved as an image file in Google drive.

image

The Google drive files:
image

This is only an entry point where the actual image is passed to Google Script and saved to the drive but you can of course enhance it by, say, having different file formats saved, or the script returns the file created so that the Thunkable app saves the URL to Firebase or upload the image to Cloudinary.

Copy of the sample project
https://x.thunkable.com/projectPage/618cfa678cdb0f0011998dbe

Hope you will find it interesting.

4 Likes
2

This is such an excellent use of this tool!

You could also save to your firebase account with some extra JS and then have everything live in 1 home. Your firebase Auth, DB, and File Storage!

4 Likes
3

Thank you for the suggestion. Yes, I can do that.
See this post where I explain how to get the authentication of Firebase without using the Sign in components and one you retrieved a token you can then access the data through the API just like the previous posts in this same thread.

Basically, you can use Thunkable as from end and use the Web API to communicate with all other services.

2 Likes
4

Yes! its perfect! You can even tie in with the firestore API via the thunkable aPI. although its a bit more work to setup, you’re query capabilities are supercharged!

3 Likes
5

I have created this project and am looking to do extend it. Could you explain in more detail how one could upload the URL of the image once saved to google drive to firebase real-time database? Also, is there a way to upload a canvas image straight from Thunkable to firebase via Cloudinary or do you have to save it to google drive first?

Thanks for your help

1 Like
6

That’s a good idea you have. I make the sample project to prove a concept and help others to start with the work they have in mind.

in your case, you do not need to do anything other than save the canvas image directly to a Firebase key.

I have amended the demo project. If you remix it now you will see two new buttons; Save to Cloud and Get from Cloud.

Draw something in your canvas and then click Save to Cloud then click Get from Cloud to see the image you drawn showing again as a picture.

You can even exit the app and run it again and just click Get from Cloud and you should see the last saved canvas image.

Hope this could make a good start to your project.

7

Thank you so much. I appreciate your help! Will try it out now!

1 Like