تغيير حجم الصور من جانب العميل باستخدام JavaScript قبل التحميل

يوفر تغيير حجم الصور من جانب العميل العديد من المزايا قبل تحميلها إلى الخادم. فهو يقلل من تحميل الخادم، ويسرع عرض الصفحة، ويوفر تجربة أفضل للمستخدم.

هل من الممكن تغيير حجم صورة جافا سكريبت من جانب العميل؟

نعم، من الممكن أن تغيير حجم الصور من جانب العميل باستخدام JavaScript. هناك خوارزميات مفتوحة المصدر متاحة تتيح تغيير الحجم دون اللجوء إلى Flash.

خوارزمية لتغيير حجم الصورة من جانب العميل

تتوفر إحدى هذه الخوارزميات على GitHub: https: //Gist.github.com/dcollien/312bce1270a5f511bf4a. يتضمن إصدارات في كل من ES6 وJavaScript الفانيليا التي يمكن تضمينها في أي تطبيق ويب.

مثال للاستخدام

1. حدد مدخلاً لاختيار الملف وحدد علامة صورة لعرض الصورة التي تم تغيير حجمها.
2. في مستمع حدث onchange للإدخال، استدعاء وظيفة تغيير الحجم التي توفرها الخوارزمية. حدد الأبعاد المطلوبة ووظيفة رد الاتصال.
3. ستتلقى وظيفة رد الاتصال كائن ثنائي كبير الحجم تم تغيير حجمه وعلامة تشير إلى ما إذا كان تغيير الحجم ناجحًا.
4. استخدم كائن ثنائي كبير الحجم الذي تم إرجاعه لتعيين سمة src الخاصة بـ علامة الصورة لمعاينة الصورة التي تم تغيير حجمها.

يدعم كلاً من ES6 وJavaScript Vanilla.

يكتشف قدرات المتصفح تلقائيًا ويطبق polyfills لتحقيق التوافق الأمثل.
• يتجاهل صور GIF المتحركة للحفاظ على سلامتها.