TypeScript 图像处理与编辑：Jimp、Sharp、Canvas

TypeScript 图像处理：Jimp、Sharp 和 Canvas 库概述

TypeScript 是服务器端和客户端开发的强大工具。当需要处理图像（调整大小、应用滤镜、转换格式）时，专门的库可以派上用场。在本文中，我们将介绍三种流行的解决方案：Jimp、Sharp 和 Canvas。您将了解如何安装它们，并看到 TypeScript 中的工作代码示例。

1. Jimp — 纯 JavaScript，无原生依赖

Jimp（JavaScript 图像处理程序）完全基于 JavaScript 运行，因此无需安装额外的系统库。如果您需要跨平台性和简单性，这是理想的选择。

安装

npm install jimpnpm 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 支持多种操作：裁剪、旋转、叠加文本、调整亮度/对比度、滤镜（灰度、棕褐色、模糊）。所有方法都返回 Jimp 实例，允许链式调用。

2. Sharp — 最大性能

Sharp 使用用 C 编写的原生库 libvips。这使其成为 Node.js 中最快的图像处理工具之一。Sharp 非常适合高负载服务器和处理管道。

安装

npm install sharpnpm 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）提供类似于 HTML5 Canvas 的 API。当需要绘制图表、从头创建图像或叠加复杂文本时，它是不可或缺的。

安装

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

注意：node-canvas 需要安装系统依赖项（Cairo、Pango、libjpeg）。详情请参阅官方文档。

示例：创建带文本的图像

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

async function