You have unlimited access as a PRO member
You are receiving a free preview of 3 lessons
Your free preview as expired - please upgrade to PRO
Contents
Recent Posts
- Object Oriented Programming With TypeScript
- Angular Elements Advanced Techniques
- TypeScript - the Basics
- The Real State of JavaScript 2018
- Cloud Scheduler for Firebase Functions
- Testing Firestore Security Rules With the Emulator
- How to Use Git and Github
- Infinite Virtual Scroll With the Angular CDK
- Build a Group Chat With Firestore
- Async Await Pro Tips
Firebase Storage Cloud Function - Image Thumbnail Generator
written by Jeff Delaney
This snippet has been updated! Check out the latest Cloud Storage Thumbnail Generator using Cloud Functions v2.x
This snippet is a Firebase cloud function that was modified from the official thumbnail generator . Instead of ImageMagick, this snippet uses sharp to significantly improve performance.
Gist
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const functions = require('firebase-functions'); | |
| const gcs = require('@google-cloud/storage')(); | |
| const sharp = require('sharp') | |
| const _ = require('lodash'); | |
| const path = require('path'); | |
| const os = require('os'); | |
| exports.generateThumbnail = functions.storage.object('uploads/{imageId}').onChange(event => { | |
| const object = event.data; // The Storage object. | |
| console.log(object) | |
| const fileBucket = object.bucket; // The Storage bucket that contains the file. | |
| const filePath = object.name; // File path in the bucket. | |
| const contentType = object.contentType; // File content type. | |
| const resourceState = object.resourceState; // The resourceState is 'exists' or 'not_exists' (for file/folder deletions). | |
| const metageneration = object.metageneration; // Number of times metadata has been generated. New objects have a value of 1. | |
| const SIZES = [64, 256, 512]; // Resize target width in pixels | |
| if (!contentType.startsWith('image/') || resourceState == 'not_exists') { | |
| console.log('This is not an image.'); | |
| return; | |
| } | |
| if (_.includes(filePath, '_thumb')) { | |
| console.log('already processed image'); | |
| return; | |
| } | |
| const fileName = filePath.split('/').pop(); | |
| const bucket = gcs.bucket(fileBucket); | |
| const tempFilePath = path.join(os.tmpdir(), fileName); | |
| return bucket.file(filePath).download({ | |
| destination: tempFilePath | |
| }).then(() => { | |
| _.each(SIZES, (size) => { | |
| let newFileName = `${fileName}_${size}_thumb.png` | |
| let newFileTemp = path.join(os.tmpdir(), newFileName); | |
| let newFilePath = `thumbs/${newFileName}` | |
| sharp(tempFilePath) | |
| .resize(size, null) | |
| .toFile(newFileTemp, (err, info) => { | |
| bucket.upload(newFileTemp, { | |
| destination: newFilePath | |
| }); | |
| }); | |
| }) | |
| }) | |
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "functions", | |
| "description": "Cloud Functions for Firebase", | |
| "dependencies": { | |
| "@google-cloud/storage": "^0.4.0", | |
| "firebase-admin": "^4.1.2", | |
| "firebase-functions": "^0.5", | |
| "lodash": "^4.17.4", | |
| "request-promise": "^2.0.0", | |
| "sharp": "^0.18.1" | |
| }, | |
| "private": true | |
| } |