Trình tạo bộ lọc CSS

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

Tải ảnh của riêng bạn lên và chín chức năng có thể xâu chuỗi — làm mờ, độ sáng, độ tương phản, bão hòa, xoay màu, nâu đỏ, thang độ xám, đảo ngược và đổ bóng — áp dụng trực tiếp cho ảnh đó dưới dạng khai báo CSS `filter` thực tế trên phần tử `<img>`, không phải mẫu màu mô phỏng. Thêm một hàm từ vùng chọn, kéo hàng của nó lên hoặc xuống trong danh sách để thay đổi vị trí của nó trong chuỗi, điều chỉnh thanh trượt cũng như bản xem trước và cập nhật dòng `filter: ...;` có thể sao chép trên mỗi đầu vào. Xóa một bước bằng nút riêng của bước đó, ngay trong hàng.

Chuỗi thứ hai, nhỏ hơn xây dựng giá trị `bộ lọc phông nền` được áp dụng cho bảng lớp phủ được đặt trên bản xem trước, do đó bạn có thể thấy hiệu ứng kính mờ — kỹ thuật đằng sau các thanh điều hướng mờ hiện đại và nền phương thức — mà không cần chạm vào chuỗi bộ lọc riêng của hình ảnh bên dưới. Nó hoạt động ngay cả trước khi bạn tải ảnh lên, trên nền giữ chỗ đầy màu sắc, vì vậy bạn có thể quay số trong thiết kế bảng điều khiển mờ trong vài giây.

Khi bản xem trước trông ổn, hãy sao chép CSS trực tiếp từ hộp đầu ra hoặc xuất PNG thực: chuỗi bộ lọc tương tự được chuyển đến thuộc tính `ctx.filter` của ngữ cảnh Canvas 2D — sử dụng cú pháp giống hệt như thuộc tính `filter` CSS — và canvas được chuyển đổi thành tệp có thể tải xuống với `canvas.toBlob()`. Hình ảnh được xuất 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 một chuỗi bộ lọc chạy qua cùng một bản hiển thị gốc. 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 cứ đâu.