在 TypeScript 中处理图像：库、工具和代码示例

在 TypeScript 中处理图像：工具和库的完整概述

TypeScript 是一种用于服务器端和客户端开发的强大语言，经常用于图像处理。在本文中，我们将介绍在 TypeScript 中处理图像的主要库和工具，包括安装、配置和实际代码示例。

从 Web 应用程序到后端服务，各种项目都可能需要图像处理。TypeScript 添加了严格的类型检查，简化了复杂算法的开发并减少了错误数量。

用于图像处理的流行库

• Sharp — 一个用 C++ 编写的高性能 Node.js 库。非常适合服务器端处理：调整大小、压缩、格式转换。
• Jimp — 一个纯 JavaScript 库，不需要原生依赖。适用于简单操作和跨平台解决方案。
• Canvas — Node.js 的 HTML5 Canvas 实现。允许绘图、叠加文本、创建复杂构图。
• Pica — 用于在浏览器和 Node.js 中进行高质量图像调整大小的库。

在 TypeScript 中安装和配置 Sharp

Sharp 是最快的图像处理库之一。通过 npm 安装：

npm install sharpnpm 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 jimpnpm 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 canvasnpm 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('图像已创建');};

保持质量的图像压缩

图像优化是 Web 项目的关键任务。Sharp 允许精细调整压缩参数：