Save Canvas Image to your Google drive

muneer
Thu, 11 Nov 2021 13:24:43 +0000
Tutorials and DIY Guides

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:

and:

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.

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.

The Google drive files:

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

x.thunkable.com

Thunkable

Hope you will find it interesting.

8 posts - 4 participants