Обработка и редактирование изображений на TypeScript: Jimp, Sharp, Canvas

Работа с изображениями в TypeScript: обзор библиотек Jimp, Sharp и Canvas

TypeScript — мощный инструмент для серверной и клиентской разработки. Когда возникает необходимость обрабатывать изображения (изменять размер, накладывать фильтры, конвертировать форматы), на помощь приходят специализированные библиотеки. В этой статье мы рассмотрим три популярных решения: Jimp, Sharp и Canvas. Вы узнаете, как установить каждую из них, и увидите рабочие примеры кода на TypeScript.

1. Jimp — чисто JavaScript, без нативных зависимостей

Jimp (JavaScript Image Manipulation Program) работает исключительно на JavaScript, поэтому не требует установки дополнительных системных библиотек. Это идеальный выбор, если вам нужна кроссплатформенность и простота.

Установка

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

Пример: изменение размера и применение сепии

import Jimp from 'jimp';

async function processImage(inputPath: string, outputPath: string): Promise<void> {
    const image = await Jimp.read(inputPath);
    image
        .resize(300, 200)        // ширина 300, высота 200
        .sepia()                 // эффект сепии
        .quality(80)             // качество JPEG
        .writeAsync(outputPath);
    console.log('Готово!');
}

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

Jimp поддерживает множество операций: обрезка, поворот, наложение текста, изменение яркости/контраста, фильтры (greyscale, sepia, blur). Все методы возвращают экземпляр Jimp, что позволяет строить цепочки вызовов.

2. Sharp — максимальная производительность

Sharp использует нативную библиотеку libvips, написанную на C. Это делает его одним из самых быстрых инструментов для обработки изображений в Node.js. Sharp отлично подходит для высоконагруженных серверов и конвейеров обработки.

Установка

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

Пример: конвертация в WebP и ресайз

import sharp from 'sharp';

async function convertToWebP(inputPath: string, outputPath: string): Promise<void> {
    await sharp(inputPath)
        .resize(800, 600, { fit: 'cover' })  // обрезка под размер
        .webp({ quality: 85 })               // формат WebP
        .toFile(outputPath);
    console.log('Конвертация завершена');
}

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

Sharp также умеет извлекать метаданные (EXIF), поворачивать изображение на основе ориентации из EXIF, применять размытие, изменять цветовое пространство и работать с буферами без записи на диск.

Работа с буфером

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('Буфер обработан');
});

3. Canvas (node-canvas) — рисование и текст

Библиотека Canvas (node-canvas) предоставляет API, аналогичный HTML5 Canvas. Она незаменима, когда нужно нарисовать график, создать изображение с нуля или наложить сложный текст.

Установка

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

Внимание: node-canvas требует установки системных зависимостей (Cairo, Pango, libjpeg). Подробности — в официальной документации.

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

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

async function createBanner(text: string): Promise<void> {
    // Регистрируем шрифт (если нужно нестандартное начертание)
    registerFont('path/to/font.ttf', { family: 'MyFont' });

    const width = 600;
    const height = 200;
    const canvas = createCanvas(width, height);
    const ctx = canvas.getContext('2d');

    // Фон
    ctx.fillStyle = '#3498db';
    ctx.fillRect(0, 0, width, height);

    // Текст
    ctx.font = 'bold 40px MyFont';
    ctx.fillStyle = '#ffffff';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(text, width / 2, height / 2);

    // Сохраняем
    const buffer = canvas.toBuffer('image/png');
    fs.writeFileSync('banner.png', buffer);
    console.log('Баннер создан');
}

createBanner('Hello