معالجة الصور في Node.js: المكتبات والأدوات

العمل مع الصور في JavaScript (Node.js): نظرة عامة على المكتبات والأمثلة

في تطوير الويب الحديث باستخدام Node.js، غالبًا ما تنشأ الحاجة لمعالجة الصور: تغيير الحجم، تحويل التنسيقات، إضافة علامات مائية، أو تطبيق فلاتر. على الرغم من أن JavaScript لم يُصمم أصلاً للعمل مع الرسومات، إلا أن النظام البيئي لـ Node.js يقدم العديد من المكتبات القوية التي تحل هذه المهام بكفاءة وبأقل استهلاك للذاكرة.

في هذه المقالة، سنستعرض ثلاث أدوات شائعة: Sharp (معالجة عالية الأداء)، Jimp (JavaScript نقي بدون تبعيات خارجية)، وCanvas (محاكاة لواجهة برمجة المتصفح). لكل مكتبة نقاط قوتها، ويعتمد الاختيار على متطلبات المشروع المحددة.

1. Sharp — السرعة والكفاءة

Sharp هي أسرع مكتبة لمعالجة الصور في Node.js. تستخدم وحدات libvips الأصلية (C/C++)، مما يسمح بمعالجة الصور الكبيرة بأقل استخدام للذاكرة العشوائية. Sharp مثالية لتطبيقات الخادم التي تتطلب أداءً عاليًا ومعالجة متسلسلة.

الإمكانيات الرئيسية لـ Sharp:

• تغيير الحجم، القص، تدوير الصور
• التحويل بين تنسيقات JPEG، PNG، WebP، AVIF، TIFF
• تطبيق تصحيح الألوان وإضافة الشفافية
• العمل مع بيانات EXIF الوصفية
• المعالجة المتدفقة عبر pipe

مثال: تغيير الحجم والتحويل إلى WebP

const sharp = require('sharp');

async function processImage() {  try {    await sharp('input.jpg')      .resize(300, 200)            // العرض 300، الارتفاع 200      .webp({ quality: 80 })       // تحويل إلى WebP بجودة 80%      .toFile('output.webp');    console.log('تمت معالجة الصورة!');  } catch (error) {    console.error('خطأ:', error);  }}

processImage();

ميزة Sharp هي دعم سلاسل العمليات. يمكنك تطبيق resize، rotate، grayscale، وtoFormat بالتتابع دون إنشاء ملفات وسيطة. هذا يوفر الوقت والموارد.

2. Jimp — البساطة بدون تبعيات أصلية

Jimp (JavaScript Image Manipulation Program) هي مكتبة مكتوبة بالكامل بلغة JavaScript. ميزتها الرئيسية هي عدم الحاجة لترجمة وحدات أصلية. تعمل Jimp على أي منصة تدعم Node.js، بما في ذلك Windows وmacOS وLinux. ومع ذلك، فإن العالمية تأتي بتكلفة في السرعة: Jimp أبطأ من Sharp عند معالجة الملفات الكبيرة.

إمكانيات Jimp:

• العمليات الأساسية: تغيير الحجم، القص، التدوير
• التأثيرات اللونية: السطوع، التباين، العكس، السيبيا
• إضافة النص والصور الأخرى
• دعم تنسيقات JPEG، PNG، BMP، GIF، TIFF
• العمل مع البكسلات (معالجة بكسل ببكسل)

مثال: إضافة نص على الصورة

const Jimp = require('jimp');

async function addText() {  const image = await Jimp.read('background.jpg');  const font = await Jimp.loadFont(Jimp.FONT_SANS_64_WHITE);

  image    .resize(800, 600)    .print(font, 50, 50, 'مرحبًا، أيها العالم!')    .write('output.jpg');

  console.log('تمت إضافة النص!');}

addText();

Jimp مناسبة تمامًا للنماذج الأولية أو المشاريع التي لا يكون الأداء فيها حرجًا. على سبيل المثال، لبوت تعليمي أو خدمة صغيرة لإنشاء الميمات.

3. Canvas — محاكاة لواجهة برمجة المتصفح

مكتبة canvas (node-canvas) تنفذ واجهة HTML5 Canvas API على جانب الخادم. تستخدم Cairo (عارض ثنائي الأبعاد) وتسمح برسم رسومات مخصصة، وليس فقط معالجة الصور الجاهزة. هذا هو الخيار المثالي إذا كنت بحاجة لإنشاء صور من الصفر: رس