العمل مع الصور في 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:

• العمليات الأساسية: تغيير الحجم، القص، التدوير
• التأثيرات اللونية: السيبيا، الرمادي، السطوع
• العمل مع الشفافية وإضافة النص
• دعم أكثر من 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));  };