Philter.js - ไลบรารีการเปลี่ยนแปลงรูปภาพฟรีโดยใช้ตัวกรอง CSS

Instagram เป็นที่รู้จักอย่างกว้างขวางว่าเป็นเครือข่ายรูปภาพที่ได้รับความนิยมมากที่สุด มันจัดการภาพถ่ายกว่า 52 ล้านภาพต่อวันและอีกหลายภาพ รวมตัวกรอง ที่ปรับเปลี่ยนภาพได้ทันที.

นอกจากนี้ยังเป็นไปได้โดยใช้ตัวกรอง CSS ซึ่ง สมัครโดยตรงในเบราว์เซอร์. คุณสมบัติตัวกรองที่กำหนดเองเหล่านี้มีการสนับสนุนอย่างกว้างขวางในเบราว์เซอร์จำนวนมากและดูดี.

กับ ปลั๊กอิน JavaScript ของ Philter, คุณสามารถปรับขนาดกระบวนการนี้เพื่อประหยัดเวลาและย้ายรหัสของคุณเป็น HTML สำหรับ ผลตัวกรองแบบไดนามิก.

ด้วยการใช้ปลั๊กอินนี้คุณจะได้รับ ควบคุมภาพของคุณได้ดีกว่ามาก. วิธีนี้คุณสามารถเลือกตัวกรองที่คุณต้องการนำไปใช้กับภาพแต่ละภาพและหากตัวกรองบางอย่างควรเปลี่ยนตามพฤติกรรมของผู้ใช้เช่นการวางเมาส์เหนือ.

CSS รองรับการเปลี่ยนภาพเคลื่อนไหว และฟิลเตอร์ทำให้กระบวนการนี้ง่ายมาก คุณเพียงแค่ดาวน์โหลด Philter จากหน้าแรกหรือจาก GitHub repo เมื่อเพิ่มลงในหน้าเว็บของคุณคุณก็แค่ เพิ่มรหัสการเริ่มต้น และปล่อยมันไป.

นี่คือ ตัวอย่างโค้ด จาก repo GitHub:

โดยค่าเริ่มต้นคุณสามารถ ตั้งค่าช่วงการเปลี่ยนภาพและแอตทริบิวต์ข้อมูลเพิ่มเติม ที่คุณสามารถผนวกใน HTML URL พารามิเตอร์กำหนดเส้นทางที่ Philter ควรมองหาไฟล์ SVG ที่กำหนดเองที่ใช้ในกระบวนการกรอง.

ตัวกรองพิเศษเหล่านี้คือ บรรจุด้วยไลบรารี, ดังนั้นคุณไม่จำเป็นต้องแก้ไขเลย แต่คุณอาจย้ายพวกเขาไปรอบ ๆ หรือวางไว้ในโครงสร้างไดเรกทอรีที่แตกต่างจากไฟล์ปัจจุบันของคุณดังนั้นการตั้งค่านี้ อาจต้องมีการเปลี่ยนแปลง.

ตอนนี้คุณสามารถทำได้ เพิ่มตัวกรองที่กำหนดเอง จาก HTML ของคุณ องค์ประกอบหรือภาชนะบรรจุ.

นี่คือ ตัวอย่างง่ายๆ:

คุณสามารถหา รายการทั้งหมดของตัวกรองทั้งหมด บน GitHub พร้อมด้วย คู่มือการตั้งค่าที่สมบูรณ์ และตัวอย่างรหัสอื่น ๆ อีกมากมาย.

Philter เป็นหนึ่งในปลั๊กอินฟรีที่เจ๋งที่สุดและมันก็เพิ่มขีด จำกัด ของ CSS ที่ทันสมัย คุณสามารถทำได้ ออกแบบตัวกรองของคุณเอง หากคุณยินดีที่จะขุดลงใน codebase และคนจรจัดรอบ ๆ.

เพื่อให้ง่ายต่อการเริ่มต้นเพียงไปที่หน้าแรกของ Philter และดาวน์โหลดสำเนา คุณสามารถใช้งานได้ทันที.