العمل مع الصور في TypeScript: المكتبات والأدوات وأمثلة الكود

العمل مع الصور في TypeScript: نظرة شاملة على الأدوات والمكتبات

TypeScript هي لغة قوية لتطوير الخادم والعميل، وتُستخدم غالبًا لمعالجة الصور. في هذه المقالة، سنستعرض المكتبات والأدوات الرئيسية للعمل مع الصور في TypeScript، بما في ذلك التثبيت والإعداد والأمثلة العملية للكود.

قد تكون معالجة الصور مطلوبة في مشاريع متنوعة: من تطبيقات الويب إلى خدمات الخلفية. يضيف TypeScript كتابة صارمة للأنواع، مما يبسط تطوير الخوارزميات المعقدة ويقلل من عدد الأخطاء.

المكتبات الشائعة للعمل مع الصور

• Sharp — مكتبة عالية الأداء لـ Node.js، مكتوبة بلغة C++. مثالية لمعالجة الخادم: تغيير الحجم، الضغط، تحويل التنسيقات.
• Jimp — مكتبة JavaScript خالصة، لا تتطلب تبعيات أصلية. مناسبة للعمليات البسيطة والحلول عبر المنصات.
• Canvas — تنفيذ HTML5 Canvas لـ Node.js. تتيح الرسم، إضافة النصوص، إنشاء تركيبات معقدة.
• Pica — مكتبة لتغيير حجم الصور بجودة عالية في المتصفح و Node.js.

تثبيت وإعداد Sharp في TypeScript

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('تم إنشاء الصورة');};

ضغط الصور مع الحفاظ على الجودة

تحسين الصور مهمة بالغة الأهمية لمشاريع الويب. يتيح Sharp ضبط معلمات الضغط بدقة: