{"id":9610,"date":"2024-04-05T02:50:19","date_gmt":"2024-04-05T02:50:19","guid":{"rendered":"https:\/\/1cliqueconsultancy.com\/?p=9610"},"modified":"2025-11-21T01:14:49","modified_gmt":"2025-11-21T01:14:49","slug":"lovell-sharp-high-performance-node-js-image","status":"publish","type":"post","link":"https:\/\/1cliqueconsultancy.com\/index.php\/2024\/04\/05\/lovell-sharp-high-performance-node-js-image\/","title":{"rendered":"lovell sharp: High performance Node js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library."},"content":{"rendered":"
Create a new file named touch_database.js and follow the examples. Change the Sharp instance\u2019s file format from JPEG to PNG using the format() method. When it comes to user-generated content, images play a vital role.<\/p>\n
After that, you\u2019ll chain the grayscale() method to the cropped image instance and convert it to grayscale. First, you\u2019ll chain the resize() method from the sharp instance to resize the image, and save it in the project directory. Second, you\u2019ll chain the format() method to the resized image to change its format from png to jpeg.<\/p>\n
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, \u201crobo.jpg\u201d 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.<\/p>\n
With the extract method, any part of the image that fits inside the box will be retained. Now that Sharp.js is installed, let\u2019s explore some common image manipulation tasks. It supports a wide range of operations, including resizing, cropping, rotating, and converting image formats.<\/p>\n
After resizing the image, you chain the sharp module\u2019s toFile() method, which takes the image path as an argument. Passing sammy-resized.png as an argument will save the image file with that name in the working directory of your program. To extract the metadata, you\u2019ll first import the sharp module, create an instance of sharp, and pass the image path as an argument. After that, you\u2019ll chain the metadata() method to the instance to extract the metadata and log it into the console.<\/p>\n
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\u2019ll build a dynamic image processing API using Node.js and Sharp.<\/p>\n
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.<\/p>\n
The top and left values positions the sammy-transparent.png image relative to the underwater.png image. Now that you\u2019ve rotated and blurred an image, you\u2019ll 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\u2019ll 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\u2019ve read an image and extracted its metadata, you\u2019ll now resize an image, change its format, and compress it.<\/p>\n
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\u2019t be shown but the image sammy-cropped.png will be saved in your project directory.<\/p>\n
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\u2019s file format from JPEG to PNG, we use the format() method.<\/p>\n
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\u2019ve confirmed the SVG code draws the text, you will composite the text graphics onto sammy.png. 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.<\/p>\n
Check for the existence of sammy-rotated.png in your project directory. Now that you\u2019ve cropped and extracted the image, you\u2019ll work with rotating and blurring it. Now that you\u2019ve resized an image, changed its format and compressed it, you will crop and grayscale the image. To compress the image, you pass it a mozjpeg property that holds a boolean value. When you set it to true, sharp uses mozjpeg defaults to compress the image without sacrificing quality. The object can also take more options; see the sharp https:\/\/traderoom.info\/10-best-node-js-image-manipulation-libraries-in\/<\/a> documentation for more details.<\/p>\n 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.<\/p>\n 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\u2019ve the understanding of these, it\u2019s 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.<\/p>\n 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.<\/p>\n 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.<\/p>\n","protected":false},"excerpt":{"rendered":" Create a new file named touch_database.js and follow the examples. Change the Sharp instance\u2019s file format from JPEG to PNG using the format() method. When it comes to user-generated content, images play a vital role. Each formatImage() accepts a separate object with various properties. In this Node.js Sharp tutorial, we\u2019ve explored the unmatched speed and …<\/p>\nHigh performance Node.js image processing<\/h2>\n
Installation\u200b<\/h2>\n