إعادة أخذ العينات عن طريق تقليص الحجم يقلل من جودة الصورة؟

الهدف هنا هو تقليل حجم الصورة مع الحفاظ على جودتها في بيئة المتصفح. تنشأ المشكلة عند تصغير حجم صورة باستخدام قماش HTML5، مما يؤدي إلى تدهور الصورة.

تقليص الحجم مقابل الاستيفاء

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

Pixel Perfect Downscaling

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

الحل: خوارزمية تقليل حجم البكسل المثالية

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

تفاصيل التنفيذ

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

القيود

بينما توفر هذه الخوارزمية تصغير الحجم عالي الجودة، إلا أنها قد تكون بطيئة في معالجة الصور الكبيرة بسبب استخدام وظائف getImageData وputImageData.

اعتبارات إضافية

بالنسبة للصور الأصغر حجمًا، يمكن إجراء تصغير الحجم عدة مرات باستخدام القياس المدمج في لوحة HTML5 الآليات، لأنها تعمل على تحسين الصور الصغيرة. بالنسبة إلى الصور الأكبر حجمًا، فكر في استخدام طرق أخرى مثل CSS أو WebGL لتقليل الحجم.