Working with Images in TypeScript: Libraries, Tools, and Code Examples

Working with Images in TypeScript: A Complete Overview of Tools and Libraries

TypeScript is a powerful language for server-side and client-side development, often used for image processing. In this article, we will review the main libraries and tools for working with images in TypeScript, including installation, setup, and practical code examples.

Image processing may be required in a wide variety of projects: from web applications to backend services. TypeScript adds strict typing, which simplifies the development of complex algorithms and reduces the number of errors.

Popular Libraries for Working with Images

• Sharp — a high-performance library for Node.js, written in C++. Ideal for server-side processing: resizing, compression, format conversion.
• Jimp — a pure JavaScript library that does not require native dependencies. Suitable for simple operations and cross-platform solutions.
• Canvas — an implementation of HTML5 Canvas for Node.js. Allows drawing, overlaying text, and creating complex compositions.
• Pica — a library for high-quality image resizing in the browser and Node.js.

Installing and Configuring Sharp in TypeScript

Sharp is one of the fastest libraries for image processing. Installation is done via npm:

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

After installation, you can import the library into a TypeScript file:

import sharp from 'sharp';

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

Working with Jimp: Simple Manipulations

Jimp does not require native dependencies and is great for simple operations. Installation:

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

Example of adjusting brightness and contrast using Jimp:

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {  const image = await Jimp.read(inputPath);    image    .brightness(0.2)    // Increase brightness by 20%    .contrast(0.1)      // Increase contrast by 10%    .write(outputPath);    console.log('Image processed');};

Canvas: Creating Images from Scratch

The Canvas library allows you to create images programmatically, draw shapes, and overlay text. Installation:

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

Example of creating a simple image with text:

import { createCanvas, loadImage } from 'canvas';import * as fs from 'fs';

const createTextImage = async (  text: string,  outputPath: string): Promise<void> => {  const width = 800;  const height = 200;  const canvas = createCanvas(width, height);  const ctx = canvas.getContext('2d');

  // Fill background  ctx.fillStyle = '#4a90d9';  ctx.fillRect(0, 0, width, height);

  // Configure text  ctx.font = 'bold 48px Arial';  ctx.fillStyle = '#ffffff';  ctx.textAlign = 'center';  ctx.textBaseline = 'middle';

  // Draw text  ctx.fillText(text, width / 2, height / 2);

  // Save to file  const buffer = canvas.toBuffer('image/png');  fs.writeFileSync(outputPath, buffer);  console.log('Image created');};

Image Compression While Preserving Quality

Image optimization is a critical task for web projects. Sharp allows fine-tuning of compression parameters: