Resize image using Firebase cloud functions

This tutorial will explain how to resize an image using cloud functions while uploading in Firebase cloud storage and save the download URL of the image in Firebase real-time database for further use of image. This resizing of image is beneficial as it decreases the loading time and make the application faster.

This tutorial explains the resizing of image for web application but the logic can also be used for android and iOS applications and cloud functions will be same for all the platforms.

Setup the database, cloud storage and cloud functions for this project and hosting. Refer to this documentation for initial setup :

If you are not aware of setting up cloud functions in Firebase, refer to this article to get started :

2. Cloud Function

After you have initialized the cloud functions using Firebase CLI, a function folder is created. Inside the function folder, index.js file is present. In this file, there is the function for image resizing. This cloud function will be a HTTP trigger function ,i.e., it is called when the image is uploaded from by the user through the web application.

The below code have used some modules/packages which you have to explicitly install using the below command.

Below Function should be included in index.js file.

3. Web part to upload an image and save for further use

For this, there is a simple web page having upload option to upload an image from the device and a function that save the image to the cloud storage and then calls the above HTTPS triggered cloud function that resizes the uploaded image and returns the download URL of the image. This URL is then saved to the database for further access of that image.

Below is the HTML code for choosing image from device

Now, the function that is uploading the image and calling the cloud function for resizing image is included in photoupload.js file. Below is the code included in photoupload.js file.

Voila! The code is ready.

4. Deploy the function and website to Firebase server

Now you can deploy it and test if its working fine. For deploy run the following command in command prompt.

This will deploy the website and cloud functions on Firebase server and return a URL for the website. Just open the URL in browser, and see the uploaded image is resized and the URL of the image is stored in Firebase real-time database.

The image resizing function has been deployed. It resizes the image when you upload and image and the URL get saved to the real-time database for further use of image.

If you have any queries regarding this tutorial, feel free to ask in the comments below.

Happy Coding :)

Related posts:

There are several methods how to revive your website in a simple, but impressive manner. One of such methods is the use of simple slider. Easy slider is an element for efficient creation of catchy…

It was just past 4am UK time when I gave up on the Packers of Green Bay and conceded there was to be no famous last ditch Lambeau Field comeback against the Titans of Tennessee. In truth, the…