How to Upload Images Using Image Node Js
A Docker Official Image is a production-ready container that contains a Node software distribution and related tools. It follows an evolving set of Node best practices and pushes critical security updates regularly.
In this section, you will use the multer and sharp modules to resize images, change their format to jpeg, and compress them. You will also need to create a directory where the images will be saved.
Uploading Images
If you are building a full-stack app and want to allow users to upload images to your server, you can use image node js to make it happen. ImageKit provides a solution that saves the uploaded file to a database, gives it a URL and an identifier for later use, and allows you to serve the image directly from the server.
You can create an instance of imageKit by passing a configuration object to the constructor function. The object must contain two properties: destination, which specifies the directory where the files will be saved, and filename, which is a function that determines the uploaded files’ names.
The filename function must return a string that includes the extension. The string is matched using a regex expression that checks for the allowed image file extensions. It also calls the JavaScript toLowerCase() function to check if the string contains an image file extension and returns it as an error or success.
Resizing Images
Resizing images involves enlarging or shrinking the image size, which usually affects the image file size. Large image files can cause websites to load slower, which can negatively impact the user experience and website performance.
In this example, you will use the sharp library to resize an image, convert it to a different format, compress the image, and save it in the project directory. To do this, you will chain the resize() method from the sharp instance to resize an image, then use the toFormat() method from the sharp instance to change the image format from png to jpeg and compress the resulting image file.
The resize() function reads an image, extracts its metadata, and logs any errors that occur during execution. This prevents the program from crashing. You can also pass in a tuple of integers to specify the desired width and height of the new image. Options include cover (default), contain, fill, and inside.
Compressing Images
High-quality images are essential to a great web experience, but they can slow down the loading speed of your website and negatively impact your search engine rankings. This is why it’s important to compress your image files before uploading them.
You can use an image processing API to optimize your images without having to write any code. This can save you time and effort. It can also help reduce the overall bundle size of your project.
Most image processing APIs offer multiple configuration options, so you can choose the right settings to fit your specific needs. You can also specify which metadata you want to keep. This includes copyright information, the GPS location and the creation date. However, preserving metadata will add to the file size, so be careful when selecting this option.
The AbstractAPI Image Processing and Optimization API lets you set up an endpoint that accepts an image file and performs various operations to compress it. You can even tell the API to create resized versions of your uploaded image files.
Saving Images
Using image node js, you can save an image on your server. The file is stored in a directory of your choosing, and the uploaded file name can be customised by using the destination property on the diskStorage() method. In this code, the destination is set to my-images. The filename function uses a regex expression that filters out image file extensions and chained the toLowerCase string function to convert the original uploaded image file name to uppercase.
The readImage() function returns a promise which can be resolved with the async keyword. When this function reads an image, it will return its metadata, and if any errors occur during the process, these will be logged to prevent the program from crashing. Aside from reading images, you can also resize them and compress them. You can even create blurred images by applying a gaussian blur to the image with the sharp module’s blur() method, which accepts a sigma value.