مغير حجم الصور

هذا المشروع يمثل تطبيق ويب لتغيير حجم الصور (Image Resizer).

بناءً على لقطات الشاشة المقدمة، إليك تفصيل لميزاته وكيفية عمله على الأرجح:

واجهة المستخدم (لقطات الشاشة 1، 2، 3):

معرض الصور (Image Gallery): يعرض مجموعة من الصور الموجودة مسبقًا.

تحميل صورة (Upload Image): يسمح للمستخدمين بتحميل صور جديدة.

اختر صورة (Select Image): قائمة منسدلة لاختيار صورة من المعرض (أو ربما الصور التي تم تحميلها مؤخرًا).

مدخلات العرض (Width (px)) والارتفاع (Height (px)): حقول للمستخدم لتحديد الأبعاد المطلوبة لتغيير الحجم.

زر عرض وتغيير حجم الصورة (View and Resize Image Button): يقوم بتشغيل عملية تغيير الحجم وعرض النتيجة.

منطقة عرض الصورة (Image Display Area): تعرض الصورة المختارة أو التي تم تغيير حجمها.

التعليمات البرمجية للواجهة الخلفية والأمامية (لقطات الشاشة 4، 5، 6، 7، 8، 9، 10):

تشير مقتطفات التعليمات البرمجية إلى تطبيق ويب تم إنشاؤه باستخدام:

الواجهة الأمامية (HTML، CSS، JavaScript):

index.html: الهيكل الرئيسي لصفحة الويب، بما في ذلك نماذج التحميل وتغيير الحجم.

styles.css: يتعامل مع العرض المرئي وتخطيط التطبيق، باستخدام CSS Grid للاستجابة.

ملفات JavaScript (على الأرجح index.js أو ما شابه، كما يظهر في index.html الذي يشير إلى <script src="index.js"></script>):

دالة populateDropdown(): تجلب قائمة بالصور المتاحة من واجهة برمجة تطبيقات الواجهة الخلفية (/api/images/list) وتملأ القائمة المنسدلة "Select Image".

دالة loadGallery(): تجلب الصور من الواجهة الخلفية (/api/images/list) وتضيفها ديناميكيًا إلى قسم "Image Gallery".

مستمعي الأحداث (Event Listeners):

لنموذج "Upload Image" (uploadImageForm): يرسل طلب POST إلى /api/images/upload مع ملف الصورة.

لنموذج "View and Resize Image" (viewImageForm): يرسل طلب GET إلى /api/images/resize مع معلمات filename و width و height.

منطق تغيير حجم الصورة (Image Resizing Logic): تقوم الواجهة الأمامية بإجراء استدعاء لواجهة برمجة تطبيقات إلى نقطة نهاية الواجهة الخلفية (/api/images/resize) بالأبعاد المطلوبة. ثم تتلقى الصورة التي تم تغيير حجمها (على الأرجح ككائن ثنائي كبير أو عنوان URL) وتعرضها.

معالجة الأخطاء (Error Handling): تتضمن معالجة الأخطاء الأساسية لاستدعاءات واجهة برمجة التطبيقات والتحقق من صحة الإدخال (على سبيل المثال، التحقق من صحة العرض/الارتفاع).

الواجهة الخلفية (على الأرجح Node.js مع Express، بالنظر إلى هيكل نقطة نهاية API):

تشير نقاط نهاية API /api/images/list و /api/images/upload و /api/images/resize إلى خادم واجهة خلفية مسؤول عن:

سرد الصور المتاحة.

التعامل مع تحميلات الصور.

إجراء عملية تغيير حجم الصورة الفعلية.

الغرض من المشروع:

يهدف المشروع إلى توفير أداة ويب بسيطة وتفاعلية للمستخدمين من أجل:

عرض معرض للصور.

تحميل صور جديدة.

تحديد صورة وتغيير حجمها إلى أبعاد مخصصة (العرض والارتفاع).

عرض الصورة التي تم تغيير حجمها.

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