إنشاء محرر الصور باستخدام CamanJS: إنشاء عوامل تصفية مخصصة وطرق المزج

Arabic (العربية/عربي) translation by Diangr (you can also view the original English article)

في البرنامج التعليمي الأول من سلسلة محرر الصورة CamanJS، استخدمنا فقط built-in filters to edit our images. وهذا تقتصر لنا بعض الآثار الأساسية مثل السطوع والتباين و 18 عوامل التصفية الأخرى أكثر تعقيداً مع أسماء مثل خمر، شروق الشمس، إلخ. كانت كلها من السهل أن تطبق، ولكن لم نكن في السيطرة الكاملة على وحدات البكسل الفردية لأننا نريد تحرير الصورة.

لقد تعلمنا في البرنامج التعليمي الثاني، وحول layers and blend modes، الذي قدم لنا المزيد من السيطرة على الصور ونحن تم تحرير. على سبيل المثال، يمكن إضافة طبقة جديدة في لوحة الرسم القماشية، وتعبئته بلون أو صورة، وثم ضعه فوق الطبقة الأصل مع وضع مزيج المطبق عليه. بيد أننا قد لا تزال لا إنشاء عوامل تصفية الخاصة بنا، ووسائط مزيج يمكن أن نطبق كانت تقتصر على تلك التي قدمتها بالفعل CamanJS.

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

إنشاء وسائط مزيج جديد

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

يمكنك إنشاء وضع مزج جديد باستخدام Caman.Blender.register ("blend_mode" ، callback)؛ . هنا ، blend_mode هو الاسم الذي تريد استخدامه لتحديد وضع المزج الذي تقوم بإنشائه. وظيفة رد الاتصال يقبل معلمتين من معلمات التي تحتوي على قيم RGB لمختلفة في الطبقة الحالية والمقابله بكسل على الطبقة الأصل. تقوم الدالة بإرجاع كائن مع القيم النهائية لقنوات rgb.

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

Caman.Blender.register("maxrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r > 128 ? 255 : rgbaParent.r - rgbaLayer.r,
        g: rgbaParent.g > 128 ? 255 : rgbaParent.g - rgbaLayer.g,
        b: rgbaParent.b > 128 ? 255: rgbaParent.b - rgbaLayer.b
    };
});

لنقم بإنشاء وضع مزيج آخر بطريقة مماثلة. هذا الوقت، سيتم تعيين قيم القناة نهائياً إلى 0 إذا كانت قيمة القناة بكسل المقابلة في الطبقة الأصل أكبر من 128. إذا كانت قيمة القناة للطبقة الأصل أقل من 128، ستكون النتيجة النهائية إضافة قيم القناة للطبقة الحالية والطبقة الأصل بكسل خاص. وقد سمي هذا الوضع مزيج minrgb.

Caman.Blender.register("minrgb", function(rgbaLayer, rgbaParent) {
    return {
        r: rgbaParent.r < 128 ? rgbaParent.r + rgbaLayer.r : 0,
        g: rgbaParent.g < 128 ? rgbaParent.g + rgbaLayer.r : 0,
        b: rgbaParent.b < 128 ? rgbaParent.r + rgbaLayer.r : 0
    };
});

يجب محاولة وإنشاء الخاصة بك مزيج وسائط للممارسة.

إنشاء عوامل التصفية الجديدة المستندة إلى بكسل

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

ترد عوامل التصفية المستندة إلى بكسل قيمة قنوات RGB بكسل واحد في كل مرة. قيم RGB النهائي لتلك بكسل خاص لا تتأثر البيكسلات المحيطة. يمكنك إنشاء عوامل التصفية الخاصة بك باستخدام Caman.Filter.register ;("filter_name"،callback). أي عامل التصفية الذي قمت بإنشائه يجب استدعاء الأسلوب ()process. يقبل هذا الأسلوب اسم عامل التصفية ودالة رد اتصال كمعلمات.

أجزاء التعليمات البرمجية المتكررة التالية يوضح لك كيفية إنشاء عامل تصفية بكسل القائم الذي يحول الصور اللون الرمادي. يتم ذلك عن طريق حساب التﻷلؤ لكل بكسل وثم تعيين قيمة للقنوات الفردية لتكون مساوية التﻷلؤ المحسوبة.

Caman.Filter.register("grayscale", function () {
    this.process("grayscale", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin;
        rgba.g = lumin;
        rgba.b = lumin;
    });
    return this;
});

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

Caman.Filter.register("threshold", function (limit) {
    this.process("threshold", function (rgba) {
        var lumin = (0.2126 * rgba.r) + (0.7152 * rgba.g) + (0.0722 * rgba.b);
        rgba.r = lumin > limit ? 255 : 0;
        rgba.g = lumin > limit ? 255 : 0;
        rgba.b = lumin > limit ? 255 : 0;
    });
    return this;
});

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

بدلاً من التعامل مع لون بكسل الحالية، CamanJS كما يسمح لك لتعيين لون بكسل في مواقع المطلق والنسبي. ولسوء الحظ، أن هذا السلوك little buggy، حيث سيتعين علينا إعادة كتابة بعض الأساليب. إذا نظرتم إلى التعليمات source code للمكتبة، ستلاحظ أن استدعاء أساليب مثل ()getPixel و ()putPixel بأساليب ()coordinatesToLocation و ()locationToCoordinates على this. ومع ذلك، لم يتم تحديد هذه الأساليب في النموذج ولكن في الفئة نفسها.

هناك مسألة أخرى مع المكتبة أن يستخدم الأسلوب ()putPixelRelative اسم المتغير nowLoc بدلاً من newLoc في مكانين مختلفين. يمكنك الحصول على التخلص من هاتين المسألتين بإضافة التعليمة البرمجية التالية داخل البرنامج النصي الخاص بك.

Caman.Pixel.prototype.coordinatesToLocation = Caman.Pixel.coordinatesToLocation
Caman.Pixel.prototype.locationToCoordinates = Caman.Pixel.locationToCoordinates

Caman.Pixel.prototype.putPixelRelative = function (horiz, vert, rgba) {
    var newLoc;
    if (this.c == null) {
        throw "Requires a CamanJS context";
    }
    newLoc = this.loc + (this.c.dimensions.width * 4 * (vert * -1)) + (4 * horiz);
    if (newLoc > this.c.pixelData.length || newLoc < 0) {
        return;
    }
    this.c.pixelData[newLoc] = rgba.r;
    this.c.pixelData[newLoc + 1] = rgba.g;
    this.c.pixelData[newLoc + 2] = rgba.b;
    this.c.pixelData[newLoc + 3] = rgba.a;
    return true;
};

بعد تصحيح التعليمات البرمجية، يجب أن تكون قادراً على إنشاء عامل تصفية الذي يعتمد على ()putPixelRelative دون أي مشاكل الآن. هنا هو واحد مثل هذه التصفية التي تم إنشاؤها.

Caman.Filter.register("erased", function (adjust) {
    this.process("erased", function (rgba) {
        if(Math.random() < 0.25) {
        rgba.putPixelRelative(2, 2, {
            r: 255,
            g: 255,
            b: 255,
            a: 255
        });
        }
    });
    return this;
});

عامل التصفية هذا عشوائياً تعيين قيمة الصفوف اثنين بكسل أعلى وعمودين إلى حق بكسل الحالي إلى اللون الأبيض. وهذا بمسح أجزاء من الصورة. ومن ثم اسم عامل التصفية.

إنشاء جديد نواة التلاعب على أساس عوامل التصفية

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

تماما مثل عوامل تصفية تستند إلى بكسل، يمكنك تعريف مرشحات التلاعب kernel الخاص بك باستخدام Caman.Filter.register ("filter_name"، callback);. والفرق الوحيد هو أن الكلمة لك الآن ()processKernel داخل وظيفة رد الاتصال.

هنا مثال لإنشاء عامل تصفية مزخرف استخدام نواة التلاعب.

Caman.Filter.register("emboss", function () {
    this.processKernel("emboss", [
        -2, -1, 0,
        -1, 1, 1,
        0, 1, 2
    ]);
});

العرض التوضيحي التالي CodePen وسوف تظهر كافة عوامل التصفية التي أنشأنا في هذا البرنامج التعليمي في العمل.

خاطرة النهائي

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

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