Công cụ tạo bộ lọc CSS

Mọi công cụ tạo bộ lọc CSS đều cho bạn xếp chồng blur(), brightness(), contrast() và các hàm còn lại — nhưng hầu như không có công cụ nào để thứ tự ảnh hưởng đến kết quả, vì hầu hết chỉ áp dụng bộ lọc theo một trình tự cố định. Công cụ này khác biệt: chuỗi bộ lọc là một danh sách thực sự có thể sắp xếp lại, xây dựng bằng tính năng kéo-thả HTML5 thuần, và việc sắp xếp lại hai hàm thực sự thay đổi các pixel hiển thị, y hệt như trong CSS thực tế. Blur-rồi-hue-rotate trông khác với hue-rotate-rồi-blur, và giờ bạn có thể thấy lý do trước khi xuất bản.

Tải lên ảnh của bạn và chín hàm có thể nối chuỗi — blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert và drop-shadow — áp dụng trực tiếp lên ảnh dưới dạng khai báo CSS `filter` thực trên phần tử `<img>`, không phải mẫu mô phỏng. Thêm một hàm từ danh sách chọn, kéo dòng của nó lên hoặc xuống để thay đổi vị trí trong chuỗi, điều chỉnh thanh trượt, và bản xem trước cùng dòng `filter: ...;` sao chép được đều cập nhật theo từng thao tác. Xóa một bước bằng nút riêng, ngay trên dòng đó.

Một chuỗi thứ hai, nhỏ hơn, xây dựng giá trị `backdrop-filter` áp dụng lên một bảng phủ đặt trên bản xem trước, để bạn có thể thấy hiệu ứng kính mờ — kỹ thuật đứng sau các thanh điều hướng trong suốt và nền modal hiện đại — mà không ảnh hưởng đến chuỗi bộ lọc của chính ảnh nền. Nó hoạt động ngay cả khi chưa tải ảnh lên, trên nền placeholder nhiều màu, để bạn có thể thiết kế bảng kính mờ trong vài giây.

Khi bản xem trước vừa ý, sao chép CSS thẳng từ hộp đầu ra, hoặc xuất ảnh PNG thực: chuỗi bộ lọc đó được trao cho thuộc tính `ctx.filter` của ngữ cảnh Canvas 2D — vốn dùng cú pháp giống hệt thuộc tính CSS `filter` — và canvas được chuyển thành tệp tải về bằng `canvas.toBlob()`. Ảnh xuất ra khớp chính xác với bản xem trước trực tiếp, vì nó được tạo bởi cùng chuỗi bộ lọc chạy qua cùng một gốc kết xuất. Mọi thứ diễn ra cục bộ trong trình duyệt của bạn; ảnh của bạn không bao giờ được tải lên bất kỳ đâu.