Image Processing and Editing in TypeScript: Jimp, Sharp, Canvas

Working with Images in TypeScript: Overview of Jimp, Sharp, and Canvas Libraries

TypeScript is a powerful tool for server-side and client-side development. When the need arises to process images (resize, apply filters, convert formats), specialized libraries come to the rescue. In this article, we will look at three popular solutions: Jimp, Sharp, and Canvas. You will learn how to install each of them and see working code examples in TypeScript.

1. Jimp — Pure JavaScript, No Native Dependencies

Jimp (JavaScript Image Manipulation Program) works exclusively in JavaScript, so it does not require installing additional system libraries. This is an ideal choice if you need cross-platform compatibility and simplicity.

Installation

npm install jimpnpm install @types/jimp --save-dev

Example: Resizing and Applying Sepia

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {    const image = await Jimp.read(inputPath);    image        .resize(300, 200)        // width 300, height 200        .sepia()                 // sepia effect        .quality(80)             // JPEG quality        .writeAsync(outputPath);    console.log('Done!');}

processImage('input.jpg', 'output.jpg').catch(console.error);

Jimp supports many operations: cropping, rotation, text overlay, brightness/contrast adjustment, filters (greyscale, sepia, blur). All methods return a Jimp instance, allowing method chaining.

2. Sharp — Maximum Performance

Sharp uses the native libvips library written in C. This makes it one of the fastest tools for image processing in Node.js. Sharp is well-suited for high-load servers and processing pipelines.

Installation

npm install sharpnpm install @types/sharp --save-dev

Example: Converting to WebP and Resizing

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {    await sharp(inputPath)        .resize(800, 600, { fit: 'cover' })  // crop to fit size        .webp({ quality: 85 })               // WebP format        .toFile(outputPath);    console.log('Conversion completed');}

convertToWebP('photo.png', 'photo.webp').catch(console.error);

Sharp can also extract metadata (EXIF), rotate the image based on EXIF orientation, apply blur, change color space, and work with buffers without writing to disk.

Working with Buffers

import sharp from 'sharp';import fs from 'fs';

async function processBuffer(inputBuffer: Buffer): Promise<Buffer> {    return await sharp(inputBuffer)        .resize(200, 200)        .jpeg({ quality: 70 })        .toBuffer();}

const raw = fs.readFileSync('large.jpg');processBuffer(raw).then(smallBuffer => {    fs.writeFileSync('small.jpg', smallBuffer);    console.log('Buffer processed');});

3. Canvas (node-canvas) — Drawing and Text

The Canvas library (node-canvas) provides an API similar to HTML5 Canvas. It is indispensable when you need to draw a chart, create an image from scratch, or overlay complex text.

Installation

npm install canvasnpm install @types/node --save-dev

Note: node-canvas requires installing system dependencies (Cairo, Pango, libjpeg). Details are in the official documentation.

Example: Creating an Image with Text

import { createCanvas, loadImage, registerFont } from 'canvas';import fs from 'fs';

async function