تحويل الصور إلى صيغة JPEG باستخدام Node.js و Apidog

أنت تبني تطبيق ويب وتحتاج إلى السماح للمستخدمين برفع الصور. لكن هناك شرط: يجب أن تكون جميع الصور بتنسيق JPEG لأسباب تتعلق بالاتساق والأداء. كيف يمكنك تحويل الصور التي يرفعها المستخدمون إلى JPEG بشكل فوري؟

في هذا الدليل، سنستكشف كيفية إعداد خادم خلفي باستخدام Node.js و Express.js لتحويل الصور إلى تنسيق JPEG. سنستخدم مكتبة Sharp القوية لمعالجة الصور ونوضح كيفية التعامل مع طلبات تحويل الصور من عميل الواجهة الأمامية أو أداة إدارة API مثل Apidog.

المتطلبات المسبقة:

قبل البدء، تأكد من أنك قد قمت بتثبيت Node.js و npm (إدارة حزم Node) على نظامك. يمكنك تنزيلهما وتثبيتهما من الموقع الرسمي لـ Node.js.

إعداد الخادم الخلفي;

لنبدأ بإنشاء مجلد جديد لمشروعنا وتهيئة npm.

mkdir image-conversion-backend
cd image-conversion-backend
npm init -y

بعد ذلك، قم بتثبيت الاعتمادات الضرورية: Express و Cors و Multer و Sharp.

npm install express cors multer sharp

بعد تثبيت الاعتمادات، دعنا نخلق ملف index.js حيث سنحدد خادم Express الخاص بنا.

const cors = require("cors");
const express = require('express');
const multer = require('multer');
const sharp = require('sharp');

const app = express();
const port = process.env.PORT || 8080;

// إعداد Multer لمعالجة تحميل الملفات
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });

// تمكين مشاركة الموارد عبر النطاقات (CORS)
app.use(cors());

// تحليل جثث JSON
app.use(express.json());

// تحديد مسار لتحويل الصور
app.post('/convert', upload.single('image'), async (req, res) => {
    try {
        // استخدام Sharp لتحويل الصورة التي تم رفعها إلى تنسيق JPEG
        const buffer = await sharp(req.file.buffer).toFormat('jpg').toBuffer();

        // إرسال الصورة المحولة كاستجابة
        res.send(buffer);
    } catch (error) {
        console.error('خطأ في التحويل:', error);
        res.status(500).send('فشل التحويل');
    }
});

// بدء تشغيل الخادم
app.listen(port, () => {
    console.log(`الخادم يعمل على البورت ${port}`);
});

فهم الشيفرة;

لنقم بتفصيل المكونات الرئيسية لتطبيقنا الخلفي:

• تهيئة Express: نقوم بتهيئة تطبيق Express ونحدد رقم البورت لخادمنا.
• تهيئة Multer: تم إعداد Multer لمعالجة تحميل الملفات. في حالتنا، نحن نستخدم memoryStorage() لتخزين الملف المرفوع في الذاكرة.
• برنامج وسيط CORS: تم تمكين مشاركة الموارد عبر النطاقات (CORS) للسماح بالطلبات من عميل الواجهة الأمامية الذي يعمل على http://localhost:3000.
• مسار تحويل الصور: نقوم بتعريف مسار POST /convert حيث تتم عملية تحويل الصورة. يتعامل برنامج وسيط Multer مع تحميل الملف، وتستخدم مكتبة Sharp لتحويل الصورة إلى تنسيق JPEG.
• معالجة الأخطاء: نحن نغلف منطق التحويل في كتلة try-catch لمعالجة أي أخطاء قد تحدث خلال عملية التحويل.
• تشغيل الخادم: أخيراً، نقوم بتشغيل خادم Express، الذي يستمع على البورت المحدد.

تشغيل الخادم الخلفي

لتشغيل الخادم الخلفي، انتقل إلى دليل مشروعك في الطرفية و نفذ الأمر التالي:

node index.js

خادمك الخلفي الآن يعمل وجاهز للتعامل مع طلبات تحويل الصور.

الآن، يمكنك استخدام أداة أمامية مثل react أو vue.js أو حتى طريقة Fetch في vanilla js لإرسال طلب من الواجهة الأمامية إلى الخادم لاختبار الأمور. يجب أن يعمل ذلك. في هذا الدليل، كما ذكرت سابقاً، سنستخدم Apidog.

البدء مع Apidog

بالنسبة لأولئك منا الذين لا يعرفون ما هو Apidog، Apidog هو منصة تعاون متكاملة لتوثيق API، وتصحيح أخطاء API، ومحاكاة API، واختبار API تلقائي. بالنسبة لأولئك منا الذين سمعوا عن أو استخدموا Postman من قبل، يوفر Apidog الكثير من الميزات أكثر من Postman، مما يجعله الأداة المثالية لإدارة API لاختبار واجهات برمجة التطبيقات الخاصة بك.

يمكنك استخدام الرابط أعلاه للتنزيل، أو إنشاء حساب للبدء. بعد إنشاء حسابك، الخطوة التالية هي إرسال طلب POST إلى خادمك الخلفي الذي يعمل بالفعل لتحويل الصور إلى JPEG.

عند إنشاء حساب على Apidog، يتم إنشاء فريق/مساحة عمل جديدة تلقائيًا لك. يمكنك إنشاء مشاريع، أو الاستمرار في استخدام المشروع الافتراضي الذي تم إنشاؤه لك. في هذا المثال، سأستخدم المشروع الذي تم إنشاؤه مسبقًا، وسأنشئ طلبًا جديدًا لتجربة كود الخلفية الخاص بنا.

عند النقر على زر الطلب، سيتم عرض واجهة لإرسال طلبك الأول.

الخطوة الأولى هي تغيير نوع الطلب من GET إلى POST. قم بتحديث عنوان URL مع عنوان خادم المحلي - localhost:8080 في حالتي.

بعد ذلك، انقر على قسم "Body"، واختر بيانات النموذج. من خلال اختيار بيانات النموذج، يمكنك تحديد ورفع الصور مباشرة إلى Apidog لاختبار التحويل. الآن، أعطِ بيانات النموذج اسم "صورة"، نوع "ملف"، وارفع الصورة لتحويلها.

عند الانتهاء، انقر على زر الإرسال في الجزء العلوي الأيمن لإرسال الطلب. إذا سارت الأمور بشكل جيد، يجب أن ترى استجابة 200 والملف للتنزيل.

من المهم أن نلاحظ أنه عند تنزيل الملف، سترى ملف response.bin. عندما تطلع على الخصائص، ستكتشف أنه ملف .jpg. وهذه هي الصورة التي تم تحويلها.

الخاتمة

لقد رأينا للتو كيفية تحويل الصور من .png أو أي تنسيق آخر إلى .jpeg باستخدام node.js ثم اختبار الأمور باستخدام Apidog.

قدم لنا Apidog القدرة والمرونة لاختبار واجهة برمجة التطبيقات دون الاعتماد على أي أداة أو إطار عمل في الواجهة الأمامية.