ตัวสร้าง CSS Filter

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

อัปโหลดรูปของคุณเองแล้วฟังก์ชันที่ต่อสายโซ่ได้เก้าตัว — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert และ drop-shadow — จะปรับใช้แบบสดในรูปนั้นเป็นคำประกาศ filter CSS จริงบนอิลิเมนต์ <img> ไม่ใช่การจำลองด้วยแถบสี เพิ่มฟังก์ชันจากตัวเลือก ลากแถวขึ้นหรือลงในรายการเพื่อเปลี่ยนตำแหน่งในสายโซ่ ปรับแถบเลื่อนของมัน แล้วพรีวิวและบรรทัด filter: ...; ที่คัดลอกได้จะอัปเดตทุกครั้งที่ป้อนข้อมูล ลบขั้นตอนด้วยปุ่มของมันเองตรงนั้นในแถว

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

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