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

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

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

var oc = document.createElement('canvas'),
    octx = oc.getContext('2d');

oc.width = img.width * 0.5;
oc.height = img.height * 0.5;
octx.drawImage(img, 0, 0, oc.width, oc.height);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

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

canvas.getContext('2d', { imageSmoothingQuality: "high" });