Philter.js - مكتبة تعديل الصور المجانية باستخدام CSS Filters

إينستاجرام المعروف على نطاق واسع باسم شبكة الصور الأكثر شعبية. يتعامل مع أكثر من 52 مليون صورة يوميًا والعديد منها تشمل المرشحات التي تغير الصور على الطاير.

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

مع ال Philter جافا سكريبت البرنامج المساعد, يمكنك توسيع نطاق هذه العملية لتوفير الوقت ونقل التعليمات البرمجية الخاصة بك إلى HTML ل آثار مرشح ديناميكي.

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

CSS يدعم التحولات المتحركة و Philter يجعل هذه العملية بسيطة حقا. يمكنك فقط تنزيل Philter من الصفحة الرئيسية أو من GitHub repo. بمجرد إضافتها إلى صفحة الويب الخاصة بك ، أنت فقط أضف رمز التهيئة والسماح لها بالرحيل.

هنا أ مقتطف عينة من الريبو جيثب:

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

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

الآن ، يمكنك فقط إضافة مرشحات مخصصة الحق في HTML الخاص بك العناصر أو حاوياتها.

هنا أ مثال بسيط:

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

Philter هو واحد من أروع المكونات الإضافية المجانية ويدفع حدود CSS الحديثة. يمكنك حتى تصميم المرشحات الخاصة بك إذا كنت على استعداد للحفر في codebase والعبث حولها.

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