حل مشكلات التجانس عند تغيير حجم الصور باستخدام Canvas في JavaScript

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

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

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

يوضح مقتطف التعليمات البرمجية التالي كيفية تنفيذ التدرج لأسفل:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    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);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

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

يمكن أيضًا استخدام خاصية imageSmoothingQuality للتحكم في جودة التجانس في Chrome، مما يوفر وسيلة أكثر مباشرة لتحقيق السلاسة ، ولكنه غير مدعوم حتى الآن في جميع المتصفحات.