เครื่องกำเนิดตัวกรอง CSS

ตัวสร้างตัวกรอง CSS ทุกตัวช่วยให้คุณสามารถซ้อน blur(), ความสว่าง(), คอนทราสต์() และส่วนที่เหลือ — แต่แทบไม่มีตัวใดเลยที่ให้ความสำคัญกับลำดับ เพราะส่วนใหญ่ใช้ตัวกรองในลำดับคงที่เพียงลำดับเดียวเท่านั้น สิ่งนี้แตกต่างออกไป: สายโซ่ตัวกรองเป็นรายการจริงที่สามารถเรียงลำดับใหม่ได้ซึ่งสร้างขึ้นด้วยการลากและวาง HTML5 ดั้งเดิม และการเรียงลำดับสองฟังก์ชันใหม่จะเปลี่ยนพิกเซลที่แสดงผลอย่างแท้จริง เช่นเดียวกับใน CSS ที่ใช้งานจริง หมุนแล้วเบลอจะดูแตกต่างจากหมุนแล้วเบลอ และตอนนี้คุณก็จะเห็นเหตุผลแล้วก่อนที่คุณจะจัดส่ง

อัปโหลดรูปภาพของคุณเองและฟังก์ชันที่เชื่อมต่อกันทั้ง 9 แบบ ได้แก่ ความเบลอ ความสว่าง คอนทราสต์ ความอิ่มสี หมุนเฉดสี ซีเปีย สเกลสีเทา กลับด้าน และเงาตกกระทบ ใช้การแสดงสดกับภาพดังกล่าวเป็นการประกาศ CSS `ตัวกรอง` จริงในองค์ประกอบ `<img>` ไม่ใช่ตัวอย่างตัวอย่าง เพิ่มฟังก์ชันจากตัวเลือก ลากแถวขึ้นหรือลงในรายการเพื่อเปลี่ยนตำแหน่งในห่วงโซ่ ปรับแถบเลื่อน และดูตัวอย่างและคัดลอก `ตัวกรอง: ...;` อัปเดตบรรทัดในทุกอินพุต ลบขั้นตอนด้วยปุ่มของตัวเอง ตรงนั้นในแถว

ห่วงโซ่ที่สองที่เล็กกว่าจะสร้างค่า "ตัวกรองฉากหลัง" ที่ใช้กับแผงซ้อนทับที่วางอยู่เหนือการแสดงตัวอย่าง เพื่อให้คุณสามารถเห็นเอฟเฟกต์กระจกฝ้า ซึ่งเป็นเทคนิคเบื้องหลังแถบนำทางแบบโปร่งแสงและพื้นหลังแบบโมดอลที่ทันสมัย โดยไม่ต้องแตะห่วงโซ่ตัวกรองของรูปภาพที่อยู่ด้านล่าง โดยจะทำงานแม้ก่อนที่คุณจะอัปโหลดรูปภาพ โดยตัดกับพื้นหลังตัวยึดตำแหน่งสีสันสดใส ดังนั้นคุณจึงสามารถออกแบบแผงฝ้าฝ้าได้ภายในไม่กี่วินาที

เมื่อการแสดงตัวอย่างดูถูกต้อง ให้คัดลอก CSS ตรงจากกล่องเอาต์พุต หรือส่งออก PNG จริง: สตริงตัวกรองเดียวกันจะถูกส่งไปยังคุณสมบัติ `ctx.filter` ของบริบท Canvas 2D ซึ่งใช้ไวยากรณ์ที่เหมือนกันกับคุณสมบัติ `ตัวกรอง` ของ CSS — และผืนผ้าใบจะถูกแปลงเป็นไฟล์ที่สามารถดาวน์โหลดได้ด้วย `canvas.toBlob()` รูปภาพที่ส่งออกตรงกับการแสดงตัวอย่างสดทุกประการ เนื่องจากถูกสร้างขึ้นโดยสตริงตัวกรองเดียวกันที่ทำงานผ่านการเรนเดอร์แบบดั้งเดิมเดียวกัน ทุกอย่างเกิดขึ้นในเบราว์เซอร์ของคุณ รูปภาพของคุณไม่เคยถูกอัพโหลดที่ไหนเลย