Trích Xuất Bảng Màu Từ Ảnh miễn phí

Cách hoạt động

Trích xuất màu chạy hoàn toàn trong trình duyệt bằng thuật toán phân cụm k-means++ tự viết áp dụng lên dữ liệu điểm ảnh thô đọc từ Canvas API — không máy chủ, không thư viện bên thứ ba. Cùng ảnh và cùng số màu luôn cho cùng bảng màu vì thuật toán dùng bộ sinh số giả ngẫu nhiên xác định (mulberry32) thay vì Math.random.

1. 1
   Canvas đọc dữ liệu điểm ảnh

   Ảnh được vẽ lên phần tử HTML Canvas ngoài màn hình và giảm mẫu xuống tối đa 200px ở cạnh dài nhất. getImageData() của Canvas API trả về mọi điểm ảnh dạng byte RGBA thô, và các điểm ảnh hoàn toàn trong suốt (alpha < 128) bị loại bỏ trước khi phân cụm.
2. 2
   k-means++ phân cụm các điểm ảnh

   Bộ khởi tạo k-means++ đặt tâm cụm một cách xác định, rồi thuật toán lặp tối đa 20 lần: mỗi điểm ảnh được gán cho tâm gần nhất trong không gian RGB, rồi tâm được tính lại bằng trung bình của mọi điểm ảnh được gán. Các cụm trùng cùng giá trị hex được gộp, nên mỗi ô màu trong kết quả là duy nhất.
3. 3
   Tính siêu dữ liệu cho từng màu

   Mỗi tâm được chuyển sang HEX, HSL và tỷ lệ trên tổng số điểm ảnh (phần trăm). Độ chói tương đối WCAG được tính theo công thức chuẩn, và tỷ lệ tương phản so với cả đen và trắng được hiển thị cạnh mỗi ô màu.
4. 4
   Xuất và đầu ra ống hút màu

   Bảng màu có thể được sao chép dạng thuộc tính tùy chỉnh CSS, biến SCSS, đoạn cấu hình Tailwind hoặc JSON. Ống hút màu nhấp để lấy mẫu ánh xạ cú nhấp của bạn trên bản xem trước về đúng tọa độ điểm ảnh nguồn trên canvas độ phân giải đầy đủ, thêm màu điểm ảnh đó vào danh sách màu đã chọn riêng. Có thể tải dải bảng màu PNG qua Canvas toBlob().

Công cụ liên quan