Работа с изображениями в TypeScript: библиотеки и…

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

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

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

Существует несколько популярных библиотек, которые отлично интегрируются с TypeScript. Рассмотрим каждую из них подробнее.

Sharp

Sharp — это высокопроизводительная библиотека для обработки изображений, основанная на нативном модуле libvips. Она идеально подходит для серверных приложений на Node.js. Sharp поддерживает множество форматов (JPEG, PNG, WebP, AVIF, TIFF) и позволяет выполнять операции с минимальным потреблением памяти.

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

// Использование
resizeImage('input.jpg', 'output.jpg', 800, 600);

Основные возможности Sharp:

Изменение размеров и обрезка
Конвертация форматов
Наложение водяных знаков
Поворот и отражение
Управление качеством сжатия

Jimp

Jimp (JavaScript Image Manipulation Program) — это чисто JavaScript-библиотека, не требующая нативных зависимостей. Она работает как в Node.js, так и в браузере. Jimp проще в установке, но медленнее Sharp при обработке больших файлов.

Пример работы с Jimp в 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) // Сохраняет пропорции
    .greyscale()            // Преобразует в оттенки серого
    .contrast(0.5)          // Увеличивает контрастность
    .write(outputPath);
    
  console.log('Фильтр применён');
}

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

Возможности Jimp:

Базовые операции: resize, crop, rotate
Цветовые эффекты: sepia, greyscale, brightness
Работа с прозрачностью и наложение текста
Поддержка более 20 форматов изображений

Canvas API для браузерных приложений

Если вы разрабатываете клиентское приложение на TypeScript, можно использовать встроенный Canvas API. Это не библиотека, а стандартный веб-интерфейс для рисования и обработки изображений. TypeScript предоставляет типы для всех методов Canvas.

Пример загрузки и обработки изображения на Canvas:

function processImageOnCanvas(imageUrl: string): void {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  if (!ctx) {
    throw new Error('Canvas не поддерживается');
  }
  
  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);
    
    // Применяем эффект размытия
    ctx.filter = 'blur(4px)';
    ctx.drawImage(canvas, 0, 0);
    
    // Получаем данные пикселей
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    console.log('Первый пиксель:', imageData.data.slice(0, 4));
  };
  
  img.src = imageUrl;
}

Canvas API подходит для:

Редактирования изображений прямо в браузере
Создания графиков и анимаций
Анализа пиксельных данных (например, для распознавания)
Экспорта в различные форматы через toDataURL()

Сравнение библиотек

Выбор инструмента зависит от ваших задач:

Sharp — лучший выбор для серверных приложений с высокими требованиями к производительности
Jimp — идеален для простых задач и кросс-платформенных решений
Canvas API — незаменим для клиентской обработки и ин