For more insight into additional sharp methods, visit the sharp documentation. If you want to continue learning Node.js, see How To Code in Node.js series. Now that you’ve confirmed the SVG code draws the text, you will composite the text graphics onto sammy.png. https://traderoom.info/10-best-node-js-image-manipulation-libraries-in/ Finally, you save the SVG image in the project directory as svg-image.png. 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. The composite() method requires an image of similar size or smaller to the processed image. The output won’t be shown but the image sammy-cropped.png will be saved in your project directory.

To incorporate the text into the image, we chain the composite() function to the sharp instance, utilizing the svgText variable as input. In this example, “robo.jpg” serves as the processed (or background) image. To resize the image, we first chain the resize() function to the sharp instance. This procedure alters the overall dimensions without cropping or distorting the image. Sharp is a high-performance image processing module for Node.js. This module assists with UGC management by offering an easy solution for reading, enhancing, and saving image files.

Converting an image to grayscale

In this example, we define a cropping box that is 500px wide and 300px high, positioned 740px from the left edge and 340px from the top edge of the image. Using the extract method, any part of the image within this box will be retained, while everything outside the box will be removed. Once you’ve the understanding of these, it’s time to take step 1 for processing images. To improve the efficiency and performance of your Node.js application even further, here are some additional recommendations.

Only JPEG pictures can use the mozjpeg property, and only WebP images can use the lossless property. The toFile() method is used to save the compressed image in the processed_images folder. To change the sharp instance’s file format from JPEG to PNG, we use the format() method.

• To composite the images, you’ll chain the composite() method to the sharp instance.
• Sharp is a high-performance Node.js module for resizing, converting, and manipulating images in various formats.
• This method adjusts the dimensions without cropping or distorting the image.
• High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images.
• Cropping is the process of removing unwanted areas from an image.

We also used the composite()method to add text to the image with an SVG workaround. Lastly, we used the format() method to change the image type and compress the image. In this tutorial, you’ll use sharp to read an image and extract its metadata, resize, change an image format, and compress an image. By the end of this tutorial, you’ll have a good understanding of how to process images in Node.js.

Interactive Table of Contents

A Promise is an object that signifies the completion or failure of an asynchronous operation and the resulting value. Sharp returns a Promise, allowing us to execute actions once the image processing is finished. However, running the operations, make sure to create a new file named touch_database.js. We then create a Buffer object from the svgText variable using the Buffer.from() function and store it in the svgBuffer variable. Without any parameters, this function provides a quick, moderately sharpened result.

Building a Dynamic Image Workflow API with Node.js and Sharp

After that, you’ll chain the grayscale() method to the cropped image instance and convert it to grayscale. First, you’ll chain the resize() method from the sharp instance to resize the image, and save it in the project directory. Second, you’ll chain the format() method to the resized image to change its format from png to jpeg.

• You can find the new created grayscale image named grayscale_robo.jpg in the processed_image folder.
• The composite() method reads the SVG image from the svgBuffer variable, and positions it 0 pixels from the top, and 0 pixels from the left edge of the sammy.png.
• In this section, you’ll composite sammy-transparent.png over the underwater.png.
• Sharp.js also supports applying filters to images, such as blur, sharpen, or greyscale.

Using Async/Await

Create a new file named touch_database.js and follow the examples. Change the Sharp instance’s file format from JPEG to PNG using the format() method. When it comes to user-generated content, images play a vital role.

The only prerequisite for this tutorial is a system set up with Node.js and npm. Images are an important component of most applications that handle user-generated content. However, excessively large or unoptimized image files can negatively impact performance and user experience. A robust image processing solution can be invaluable for UGC management.

Sharpening an Image

In this example, we begin by initializing an instance of the sharp module. Using the require() function, we read the image path within the scope of the sharp() instance. In this guide, we’ll build a dynamic image processing API using Node.js and Sharp.

The top and left values positions the sammy-transparent.png image relative to the underwater.png image. Now that you’ve rotated and blurred an image, you’ll composite an image over another. Resizing is the process of altering an image dimension without cutting anything from it, which affects the image file size. In this section, you’ll resize an image, change its image type, and compress the image. Image compression is the process of reducing an image file size without losing quality. Now that you’ve read an image and extracted its metadata, you’ll now resize an image, change its format, and compress it.

GetMetadata() is an asynchronous function given the async keyword you defined before the function label. The getMetadata() function will read an image and return an object with its metadata. Next, download the images in your project directory using the curl command. The -y option tells npm to create the default package.json file. Flip an image over the x-axis using the flip() method, and flop an image over the y-axis using the flop() method.

High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. You have now used the composite() method to add text created with SVG on another image. Add the following highlighted code to composite the SVG text graphics image onto the sammy.png image. After creating the buffer object, you create a sharp instance with the buffer object as input. In addition to an image path, sharp also accepts a buffer, Uint9Array, or Uint8ClampedArray. You’ll achieve that by chaining the blur() method to the sharp instance.

In this article, you learned how to use sharp methods to process images in Node.js. First, you created an instance to read an image and used the metadata() method to extract the image metadata. Afterwards, you used the format() method to change the image type, and compress the image. Next, you proceeded to use various sharp methods to crop, grayscale, rotate, and blur an image. Finally, you used the composite() method to composite an image, and add text on an image.