For this tutorial, we’ll use the same photo URL used on the AbstractAPI tester page. As you would expect this will result in an image called test.png to be resized to a 32 by 32 sized thumb image. JIMP is a great little javaScript npm package that can be used to scale images, and more in a nodejs javaScript environment. So it can be used as part of a stack, for a nodejs tool that is designed to generate a whole bunch of thumbnail images for example. After hitting the request, an image directory will be created with our desired image. Since multer works with form data, you need to ensure the upload is via a form with configuration as multipart/form-data.

1. To upload files, we need to configure multer as a middleware to be passed.
2. After creating the buffer object, you create a sharp instance with the buffer object as input.
3. Then, we chain the sharp module’s grayscale() method to the sharp instance to alter the image’s appearance.
4. Now that you can resize an image, next you’ll convert the resized image format from png to jpeg, compress the image, and save it in the working directory.
5. Before you start writing your code, you need to create the directory that will contain the code and the images you’ll use in this article.

Node.js Sharp Tutorial – Image processing in Node.js

As you can see, this photo was not resized, but the file size was compressed. In this tutorial, we’ll use the AbstractAPI Images API to resize a photo. We’ll outline the entire process for getting started with the API, including how to acquire an API key and make CURL requests. We’ll then make a request using Node, and we’ll look at the API’s response object, and learn how to use it in your app.

To carry out the processing task, we define the convertTograyscale() function. Then, we chain the sharp module’s grayscale() method to the sharp instance to alter the image’s appearance. We save the altered image in the processed_images folder using the toFile() method. At the time of writing, sharp doesn’t have a native way of adding text to an image. To add text, first, you’ll write code to draw text using Scalable Vector Graphics(SVG). Once you’ve created the SVG image, you’ll write code to composite the image with the sammy.png image using the composite method.

So to turn our JPG file into a PNG file, we could create an async function and use sharp within it, then output a little console log when done. If you need a way to process images with Node.js, then Sharp is a fantastic library that helps you to do just that. It has quite a wide range of operations available, and using it is very straightforward. With the extensions parameter, we are telling ImageKit to leverage powerful label detection APIs by Google Cloud Vision to add tags to uploaded media files.

Resizing an image

If you’re unfamiliar with that process, check out this tutorial https://traderoom.info/10-best-node-js-image-manipulation-libraries-in/ before proceeding. From there, pricing increases to $9/month for the Starter Tier, which supports up to 1GB and 500 requests per second in a commercial environment. This Tier also provides email and live chat support and domain whitelisting. Startups with a small user base will probably find this tier sufficient. Be sure to check out my many other posts on node.js and npm packages.

We’ve added a resize field to the object and provided some specifications for how to manipulate the image. In this case, we’re dealing with a landscape image, so we’re letting the API handle the aspect ratio and just telling it what width to change the photo to. The height will be automatically resized to maintain the current aspect ratio.

1. One of the most widely used methods is the deflate compression algorithm, which combines LZ77 and Huffman coding.
2. Essentially, Sharp is a high-level wrapper for libvips with a Node.js-friendly API.
3. We read every piece of feedback, and take your input very seriously.
4. A CDN—or Content Delivery Network—is a network of servers that are strategically positioned all over the world.
5. However, as a workaround, we can draw text using SVG and then use the composite() method to add the text image to the original image.
6. ImageMagick is a widely used, open-source tool that is well-known for its extensive features.

You gave the svg element a width of 750 and height of 483 so that the SVG image will have the same size as sammy.png. This will help in making the text look centered on the sammy.png image. You’ll achieve that by chaining the blur() method to the sharp instance. However, other image formats have equivalents options such quality, compression, and lossless. Make sure to refer to the documentation to know what kind of options are acceptable for the image format you are compressing.

Bringing Sharp to WebAssembly and WebContainers

Next, we use the Buffer.from() function to create a Buffer object from the svgText variable and then store it in the svgBuffer variable. If no parameters are specified, this technique will produce a quick, moderately sharpened version of the original image. However, if a parameter is specified, this function will perform a slower, more precise sharpening. Now that you’ve confirmed the SVG code draws the text, you will composite the text graphics onto sammy.png. Create and open the addTextOnImage.js file in your text editor. Image Composition is a process of combining two or more separate pictures to create a single image.

Most images do not come in a one by one aspect ratio, and in some cases I might want lower resolution images with the same aspect ratio as the source image. For example say I have a source image that is 1600 by 900, and I want a scaled down version that is 32 by 18 rather than 32 by 32. We can use that promise to perform actions when the image processing is done. Some of these options require the use of a globally-installed libvips compiled with support for libimagequant (GPL), according to the Sharp official documentation. Changing the format of images is straightforward—simply chain functions together. The formatting has a .toFormat() function that takes the new format as the argument.

App.get will handle the get request when a client requests the webpage. The res.sendFile will send the index.html file to the client. __dirname+”/public/index.html” is the entire path of the index.html file. In this tutorial, we’ll analyze and modify an image using the sharp Node.js library. The only prerequisite for this tutorial is a system set up with Node.js and npm.

How do I resize an image in Node.js?

By leveraging these libraries, developers can greatly enhance the functionality and performance of their web applications. Now that you can resize an image, next you’ll convert the resized image format from png to jpeg, compress the image, and save it in the working directory. To do that, you will use toFormat() method, which you’ll chain after the resize() method. Unlike the imagesmanager.js, this file does not do any image processing.