Работа с изображениями в TypeScript: библиотеки, инструменты и примеры кода

Работа с изображениями в TypeScript: полный обзор инструментов и библиотек

TypeScript — мощный язык для серверной и клиентской разработки, который часто используется для обработки изображений. В этой статье мы рассмотрим основные библиотеки и инструменты для работы с изображениями в TypeScript, включая установку, настройку и практические примеры кода.

Обработка изображений может потребоваться в самых разных проектах: от веб-приложений до бэкенд-сервисов. TypeScript добавляет строгую типизацию, что упрощает разработку сложных алгоритмов и снижает количество ошибок.

Популярные библиотеки для работы с изображениями

• Sharp — высокопроизводительная библиотека для Node.js, написанная на C++. Идеально подходит для серверной обработки: ресайз, сжатие, конвертация форматов.
• Jimp — чисто JavaScript-библиотека, не требующая нативных зависимостей. Подходит для простых операций и кросс-платформенных решений.
• Canvas — реализация HTML5 Canvas для Node.js. Позволяет рисовать, накладывать текст, создавать сложные композиции.
• Pica — библиотека для качественного ресайза изображений в браузере и Node.js.

Установка и настройка Sharp в TypeScript

Sharp — одна из самых быстрых библиотек для обработки изображений. Установка выполняется через npm:

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

После установки можно импортировать библиотеку в TypeScript-файл:

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('Изображение изменено успешно');
  } catch (error) {
    console.error('Ошибка при ресайзе:', error);
  }
};

Работа с Jimp: простые манипуляции

Jimp не требует нативных зависимостей и отлично подходит для простых операций. Установка:

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

Пример изменения яркости и контрастности с помощью Jimp:

import Jimp from 'jimp';

const adjustImage = async (inputPath: string, outputPath: string): Promise<void> => {
  const image = await Jimp.read(inputPath);
  
  image
    .brightness(0.2)    // Увеличить яркость на 20%
    .contrast(0.1)      // Увеличить контраст на 10%
    .write(outputPath);
  
  console.log('Изображение обработано');
};

Canvas: создание изображений с нуля

Библиотека Canvas позволяет создавать изображения программно, рисовать фигуры, накладывать текст. Установка:

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

Пример создания простого изображения с текстом:

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');

  // Заливка фона
  ctx.fillStyle = '#4a90d9';
  ctx.fillRect(0, 0, width, height);

  // Настройка текста
  ctx.font = 'bold 48px Arial';
  ctx.fillStyle = '#ffffff';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  // Рисуем текст
  ctx.fillText(text, width / 2, height / 2);

  // Сохраняем в файл
  const buffer = canvas.toBuffer('image/png');
  fs.writeFileSync(outputPath, buffer);
  console.log('Изображение создано');
};

Сжатие изображений с сохранением качества

Оптимизация изображений — критически важная задача для веб-проектов. Sharp позволяет тонко настроить параметры сжатия:

import sharp from 'sharp';

const compressImage = async (
  inputPath: string,
  outputPath: string,
  quality: number = 80
): Promise<void> => {
  await sharp(inputPath)
    .jpeg({ quality })  // Для JPEG
    .png({ compressionLevel: 9 })  // Для PNG
    .webp({ quality })  // Для WebP
    .toFile(outputPath);
};

Пакетная обработка изображений

Часто требуется обработать несколько изображений одновременно. Используем TypeScript с async/await:

import sharp from 'sharp';
import * as fs from 'fs';
import * as path