Image management in Node.js

Image optimization, manipulation, and upload in Node.js using ImageKit.io SDK.

Resizing and cropping

Deliver resized images URL from the backend to render pixel perfect images on all devices.

  • 40+ real-time image manipulation options.
  • Adapt images using multiple crop and aspect ratio options.
  • Deliver high-resolution images using the DPR transformation.

Real-time resizing using ImageKit
// In the Node.js backend
var resizedImageURL = imagekit.url({
    path : "/girl_in_white.jpg",
    transformation : [{
        height: 400,
        width: 500,
        dpr: 2,
        cropMode: "pad_resize",
        background: "69C3EF" 
    }]
});

// Use resizedImageURL on the frontend
<img src="https://ik.imagekit.io/ikmedia/girl_in_white.jpg?tr=w-500,h-400,dpr-2,cm-pad_resize,bg-69C3EF" />

AI-based smart cropping

Automatically bring the subject of the image in the center with the content-aware smart crop.

  • Crop around faces using computer vision based face detection algorithms.
  • Define your own coordinates using the UI or API for custom cropping.

Smart cropping using ImageKit.io
// In the Node.js backend
var profilePicture = imagekit.url({
    path: "/original-image.jpg",
    transformation : [{
        height: 400,
        width: 500,
        fo: "face" // accepts auto and face
    }]
});

// Use profilePicture on the frontend
<img src={profilePicture} />

Image and text Overlays

Use URL-based parameters to dynamically add watermark and text on images.

  • Modify overlay size, position, padding, text font styles, color etc. directly from the URL.
  • Chain multiple overlays and other transformations to create an engaging visual experience.

Image and text overlay using ImageKit.io
// In the Node.js backend
var dynamicBanner = imagekit.url({
    path: "/white-canvas.png",
    transformation: [{
        height: 667,
        width: 1000,
        overlayImage: "site_graphics/girl_in_white_500.jpg",
        overlayWidth: 500,
        overlayHeight: 667,
        overlayImageFocus: "face",
        overlayX: 0,
        overlayY: 0
    }, {
        overlayImage: "site_graphics/guy_in_yellow_500.jpg",
        overlayWidth: 500,
        overlayHeight: 667,
        overlayImageFocus: "face",
        overlayX: 500,
        overlayY: 0
    }, {
        overlayText: "GET FLAT 40% OFF",
        overlayTextBackground: "0450D5",
        overlayTextPadding: 20,
        overlayTextFontSize: 30,
        overlayTextColor: FFFFFF,
        overlayTextTypography: "b",
        overlayRadius: 16,
        overlayX: 350,
        overlayY: 550
    }]
});

// Use dynamicBanner on the frontend
<img src="https://ik.imagekit.io/ikmedia/white-canvas.png?tr=w-1000,h-667:oi-site_graphics/girl_in_white_500.jpg,ow-500,oh-667,oifo-face,ox-0,oy-0:oi-site_graphics/guy_in_yellow_500.jpg,ow-500,oh-667,oifo-face,ox-500,oy-0:ot-GET%20FLAT%2040%25%20OFF,otbg-0450D5,otp-20,ots-30,otc-FFFFFF,ott-b,or-16,ox-350,oy-550" />

Signed URLs with expiry

  • Set time-based expiry and prevent third-parties from using random image transformations on your assets.
  • Prevent unauthorized users from accessing your original assets and their variants.

Signed URL using ImageKit.io
// In the Node.js backend
var signedURL = imagekit.url({
    path: "/original-image.jpg",
    transformation: [{
        "height": "300",
        "width": "300",
        "signed": true
    }]
});

// Use signedURL on the frontend
<img src={signedURL} />

File upload made easy

The SDK provides a simple interface using the .upload() method to upload files to the ImageKit Media Library.

  • Upload, manage, search, and tag resources for efficient digital asset management in the cloud.
  • Store optimized image URL from the API response and start using them in your application.

// In the Node.js backend
const fsPromises = require('fs').promises;
const fileBuffer = await fsPromises.readFile('/image.jpg');

var uploadResponse = await imagekit.upload({
    file: fileBuffer, // It accepts remote URL, base_64 string or file buffer
    fileName: "my_file_name.jpg", // required
    tags: ["tag1", "tag2"], // optional
    isPrivateFile: false
});

console.log(uploadResponse);