Image Processing with NodeJS JIMP
ImageMagick is a widely used, open-source tool that is well-known for its extensive features. The https://traderoom.info/10-best-node-js-image-manipulation-libraries-in/ ImageMagick Node.js library offers a variety of image manipulation capabilities such as transformations, color management, text rendering, and more. An acronym for “JavaScript Image Manipulation Program”, Jimp is a full-featured image processing package that runs entirely in Node.js without native dependencies.
Folders and files
- It’s common for applications that handle user-uploaded content to process images.
- It supports multiple image formats and comes with a range of features like resizing, cropping, rotating, and format conversion.
- Sharp is a popular Node.js image processing library that supports various image file formats, such as JPEG, PNG, GIF, WebP, AVIF, SVG and TIFF.
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. The cropImage() function converts the cropped image to grayscale by chaining the sharp module’s grayscale() method to the sharp instance. It then saves the image in the project directory as sammy-cropped-grayscale.png. Within the resizeImage() function, you use the toFormat() method of the sharp module to change the image format and compress it.
By following this guide, you can create a highly performant and secure image processing system that meets your needs. Almost any modern web application requires some image manipulation for some reason. It might be an image resizing strategy to reduce site load speed or protect pictures with watermarks or anything you can imagine. The input could either be a location of an Image file in the file system, a web address (URL), Jimp instance or a stream buffer.After processing it returns a promise. Firstly, we would set up our project by installing one dependency i.e sharp.
Step 1 — Setting Up the Project Directory and Downloading Images
At this point, you have written the code necessary to draw the text Sammy the Shark with SVG. Next, you’ll save the SVG image as a png with sharp so that you can see how SVG is drawing the text. Once that is done, you’ll composite the SVG image with sammy.png. In this step, you’ll rotate the sammy.png image at a 33 degrees angle. A gaussian blur is a technique of blurring an image using the Gaussian function, which reduces the noise level and detail on an image. To compress the image, you pass it a mozjpeg property that holds a boolean value.
Step 3 — Resizing, Changing Image Format, and Compressing Images
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. You have now used the composite() method to add text created with SVG on another image. Now that you’ve confirmed the SVG code draws the text, you will composite the text graphics onto sammy.png. In this code, fill changes the text color to black, font-size changes the font size, and font-weight changes the font weight. The top and left values positions the sammy-transparent.png image relative to the underwater.png image.
Image manipulation is a crucial part of web development, allowing for dynamic creation, editing, compression, and conversion of images. 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. Within the function body, you read the image by calling sharp() which takes the image path as an argument, here with sammy.png. Last but not least, LWIP is a lightweight image processing package for Node.js. Although it doesn’t offer as many features as the previous packages, it’s extremely efficient for basic operations such as resizing, cropping, and altering colors.
For the alpha property to work, you must make sure you define and set the values for r, g, and b. To create a transparent background, you must define a color first, then you can set alpha to 0 to make it transparent. When you set left to 120, the box is positioned 120px from the left edge of the image, and setting top to 70 positions the box 70px from the top edge of the image.
Make sure to send the logs of input events from the s3 bucket, its output results, and the exceptions while processing the event from the s3 bucket to Cloudwatch. I have added the code to the template.yaml file to store the logs in Cloudwatch with a 14-day retention period. The canvas native addon library is required for all tests to pass.
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. The area of the image that fits within the box will be extracted out and saved into sammy-cropped.png as a separate image. 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.
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. Like many developers, I believed that since image processing is CPU-intensive, Golang would naturally outperform Node.js due to its reputation for excellent CPU-bound task handling. The results surprised me and taught me an important lesson about making assumptions in software engineering.
You will receive no output, but an image file sammy-resized-compressed.jpeg is saved in your project directory. The resizeImage() function chains the sharp module’s resize() method to the sharp instance. In the object, you set the image dimensions you want using the width and height property. Setting the width to 150 and the height to 97 will make the image 150px wide, and 97px tall.