Resizing Images in Node.js using Express & Sharp

External Dependencies

For this project, we are also relying on some external dependencies.

The first one is express. It will make creating an API very easy and convenient. Install it using:

 npm install express --save

Furthermore, we need a library to transform our images. In this tutorial, we are going to use the library “sharp” because it promising to be the fastest solution out there. Install sharp using:

 npm install sharp --save

Now we are ready to start coding!

The Resize Function

Because we will need it later, we create and use a function called resize to load the image. This function sits inside of the resize.js file.

We are exporting it as a module, so we can import it into our main server.js file later.

module.exports = function resize(path, format, width, height) {}

The function does take some parameters, which are the path to the image, the requested format, the requested with and the requested height. For now, let’s ignore all but the first parameter and concentrate on loading the image.

For that, we are going to need the file-system module of node.js. So we need to require it at the top of the resize.js file.

const fs = require('fs')

To read the file of our image, we are going to create a read stream using the node.js streaming API. A stream is a very efficient way of handling large amounts of data because a stream does not load the data into memory all at once. Instead, it is passing it through in small chunks, never keeping more than one or two chunks in memory at once.

That way, we do need far less system memory.

Although that is true for just passing through the data, depending on the image format, we may need to load the full image into memory all at once, to modify it. So although we are continuing to use streams in the whole tutorial, please keep in mind that the image library sharp could load the full image into memory in the background.

To create a readstream, we are using the method of the file-system api. We are passing in the path we got as a parameter.

const readStream = fs.createReadStream(path)

Next, we are just returning it.

return readStream

So our function looks like this:

module.exports = function resize(path, format, width, height) {
  const readStream = fs.createReadStream(path)
  return readStream
}

Of course, it has nothing to do with resizing yet. We are just loading the image and pass back the stream.

Formulating a response

Next, we are going to use our function in our main server.js file. To do so, we first need to require it:

const resize = require('./resize')

Afterward, we use the function inside of our route callback to pass the loaded image into the response. Because the response does support streams, we can just pipe it from our readStream into the response.

 server.get('/', (req, res) => {
	res.type('image/png');
	resize('nodejs.png').pipe(res);
}
 

Notice, that we are specifying the content-type of our response, so the browser knows what to do with it. Also notice, that my image is called “nodejs.png”. You need to replace that with the name of your image in your directory.

Now, when we start our server and visit http://localhost:8000 in any browser, you should see your image.

Extracting Query-Parameter

But first, we need to extract the information how to resize and format our image from the request. For that, we are using the HTTP-query-parameter. They are looking something like this in the URL of the request. I’m sure you have seen them before.

Here is an example of how our query-parameter will look like:

 http://localhost:8000?format=png&width=200&height=200

Extracting these from the request is quite simple. We can do so using the “query” property of the request-object.

const widthString = req.query.width
const heightString = req.query.height
const format = req.query.format

Since these values are strings, but we need our image dimensions to be numbers, we need to parse them into integers. Because every query-parameter is supposed to be optional, we need to check if they are null first.

let width, height
if (widthString) {
  width = parseInt(widthString)
}
if (heightString) {
  height = parseInt(heightString)
}

Now we can use these variables and pass them into our resize function. Also, we setting the content-type of the response to the given format.

res.type(`image/${format || 'png'}`)
resize('nodejs.png', format, width, height).pipe(res)

The whole thing should now look like this:

const express = require('express')
const resize = require('./resize')
 
const server = express()
 
server.get('/', (req, res) => {
  // Extract the query-parameter
  const widthString = req.query.width
  const heightString = req.query.height
  const format = req.query.format
 
  // Parse to integer if possible
  let width, height
  if (widthString) {
    width = parseInt(widthString)
  }
  if (heightString) {
    height = parseInt(heightString)
  }
  // Set the content-type of the response
  res.type(`image/${format || 'png'}`)
 
  // Get the resized image
  resize('nodejs.png', format, width, height).pipe(res)
})
 
server.listen(8000, () => {
  console.log('Server started!')
})

Extending the Resize Function to Actually Resize

For our resize function to work as expected, we actually just need to add a couple of lines.

First, we need to require the sharp library:

const sharp = require('sharp')

Next, we are creating a new transform using the imported sharp-function. This transform holds all the information how to transform our image.

let transform = sharp()

Depending on which input-parameters are given, we are chaining different sharp-methods together.

If the format is given, we use the “toFormat” method to convert our image into that format.

if (format) {
  transform = transform.toFormat(format)
}

If width or height is defined, we adjust the size of the image using the “resize” method.

if (width || height) {
  transform = transform.resize(width, height)
}

It is important to understand that we have not modified our image in any way. We have just configured the configuration. To actually transform our image, we need to pipe the readStream into it. We are then returning the resulting stream, which will then be piped into our response.

return readStream.pipe(transform)

The whole resize file now looks like this:

const fs = require('fs')
const sharp = require('sharp')
 
module.exports = function resize(path, format, width, height) {
  const readStream = fs.createReadStream(path)
  let transform = sharp()
 
  if (format) {
    transform = transform.toFormat(format)
  }
 
  if (width || height) {
    transform = transform.resize(width, height)
  }
 
  return readStream.pipe(transform)
}

If we start our server now using

 node server.js

we have a fully function image-resize API. Feel free to test the URL we discussed above to verify that everything is working properly.