معالجة وتحرير الصور باستخدام 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 العديد من العمليات: القص، التدوير، إضافة النص، تغيير السطوع/التباين، الفلاتر (greyscale، sepia، blur). جميع الطرق تُرجع نسخة من Jimp، مما يسمح ببناء سلاسل استدعاءات.

2. Sharp — أقصى أداء

Sharp يستخدم المكتبة الأصلية libvips المكتوبة بلغة C. وهذا يجعله واحدًا من أسرع الأدوات لمعالجة الصور في 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. لا غنى عنها عندما تحتاج إلى رسم رسم بياني، إنشاء صورة من الصفر، أو إضافة نص معقد.

التثبيت

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