Working with Images in TypeScript: Libraries and Tools

Working with Images in TypeScript: Libraries and Tools

TypeScript is a powerful programming language that extends JavaScript with static typing. When developing modern web applications, there is often a need to process images: resize, convert formats, apply filters, or analyze pixels. In this article, we will look at the main libraries and tools for working with images in TypeScript, their capabilities, and usage examples.

Popular Libraries for Image Processing

There are several popular libraries that integrate well with TypeScript. Let's look at each of them in detail.

Sharp

Sharp is a high-performance image processing library based on the native libvips module. It is ideal for server-side Node.js applications. Sharp supports many formats (JPEG, PNG, WebP, AVIF, TIFF) and allows operations with minimal memory consumption.

Usage example with TypeScript:

import sharp from 'sharp';

async function resizeImage(inputPath: string, outputPath: string, width: number, height: number): Promise<void> {  try {    await sharp(inputPath)      .resize(width, height, { fit: 'cover' })      .toFile(outputPath);    console.log('Image resized successfully');  } catch (error) {    console.error('Error during processing:', error);  }}

// UsageresizeImage('input.jpg', 'output.jpg', 800, 600);

Key features of Sharp:

• Resizing and cropping
• Format conversion
• Watermark overlay
• Rotation and flipping
• Compression quality control

Jimp

Jimp (JavaScript Image Manipulation Program) is a pure JavaScript library that requires no native dependencies. It works both in Node.js and in the browser. Jimp is easier to install but slower than Sharp when processing large files.

Example of working with Jimp in TypeScript:

import Jimp from 'jimp';

async function applyFilter(imagePath: string, outputPath: string): Promise<void> {  const image = await Jimp.read(imagePath);    image    .resize(300, Jimp.AUTO) // Maintains aspect ratio    .greyscale()            // Converts to grayscale    .contrast(0.5)          // Increases contrast    .write(outputPath);      console.log('Filter applied');}

applyFilter('photo.jpg', 'photo-edited.jpg');

Jimp capabilities:

• Basic operations: resize, crop, rotate
• Color effects: sepia, greyscale, brightness
• Working with transparency and text overlay
• Support for over 20 image formats

Canvas API for Browser Applications

If you are developing a client-side application in TypeScript, you can use the built-in Canvas API. It is not a library, but a standard web interface for drawing and image processing. TypeScript provides types for all Canvas methods.

Example of loading and processing an image on Canvas:

function processImageOnCanvas(imageUrl: string): void {  const canvas = document.createElement('canvas');  const ctx = canvas.getContext('2d');    if (!ctx) {    throw new Error('Canvas is not supported');  }    const img = new Image();  img.onload = () => {    canvas.width = img.width / 2;    canvas.height = img.height / 2;        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);        // Apply blur effect    ctx.filter = 'blur(4px)';    ctx.drawImage(canvas, 0, 0);        // Get pixel data    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);    console.log('First pixel:', imageData.data.slice(0, 4));  };