Node.js backend (middleware) for image manipulation needs (transform, resize, optimize) that can be hosted in a serverless environment such as Google Cloud Functions.

Create a Google Cloud Function project that exports image transformation HTTP handler:

$ npm install image-resizing --save

const { createHandler } = require("image-resizing");

module.exports.img = createHandler({
  // Where the source images are located.
  // E.g. gs://s.example.com/image.jpg
  sourceBucket: "s.example.com",

  // Where the transformed images needs to be stored.
  // E.g. gs://c.example.com/image__w_80,h_60.jpg
  cacheBucket: "c.example.com",
});

Deploy it to GCP using Node.js v12+ runtime and configure a CDN on top of it.

You can resize and crop images in order to match the graphic design of your web site or mobile application. Whether images are uploaded in your server-side code or by your users, the original hi-res images are stored in the cloud for further processing and management. You can then dynamically create multiple resized, cropped and manipulated images on-the-fly and deliver them via dynamic URLs.

To change the size of a image, use the width and height parameters (w and h in URLs) to assign new values. You can resize the image by using both the width and height parameters or with only one of them: the other dimension is automatically updated to maintain the aspect ratio.

Examples of resizing the uploaded jpg image named sample:

1. Resizing the height to 200 pixels, maintaining the aspect ratio:

https://i.kriasoft.com/h_200/sample.jpg

2. Resizing to a width of 200 pixels and a height of 100 pixels:

https://i.kriasoft.com/w_200,h_100/sample.jpg

You can specify a region of the original image to crop by giving the x and y coordinates of the top left corner of the region together with the width and height of the region. You can also use percentage based numbers instead of the exact coordinates for x, y, w and h (e.g., 0.5 for 50%) . Use this method when you know beforehand what the correct absolute cropping coordinates are, as in when your users manually select the region to crop out of the original image.

For example, the following image shows many white sheep and one brown sheep.

https://i.kriasoft.com/brown_sheep.jpg

To manipulate the picture so that only the brown sheep is visible, the image is cropped to a 300x200 region starting at the coordinate x = 355 and y = 410:

https://i.kriasoft.com/x_355,y_410,w_300,h_200,c_crop/brown_sheep.jpg

The image can be further manipulated with chained transformations. For example, the 300x200 cropped version above, also scaled down to 150x100:

https://i.kriasoft.com/x_355,y_410,w_300,h_200,c_crop/w_150,h_100,c_scale/brown_sheep.jpg

• Google Cloud Functions: Quickstart Tutorial
• Google Cloud Functions: ImageMagick Tutorial
• ImageMagick Options

Contributions of any kind are welcome! If you're unsure about something or need directions, don't hesitate to get in touch on Discord.

Copyright © 2020-present Kriasoft. This source code is licensed under the MIT license found in the LICENSE file. Sample images and transformation options are borrowed from Cloudinary.

^{Made with ♥ by Konstantin Tarkus (@koistya, blog) and contributors.}