Công Cụ So Sánh Hình Ảnh
So sánh hai hình ảnh theo từng pixel và xem ngay lập tức những gì đã thay đổi, với hình ảnh khác biệt được tô sáng và bản tóm tắt theo tỷ lệ phần trăm — tất cả được xử lý cục bộ ngay trên trình duyệt của bạn.
🔒 Xử lý cục bộ ngay trên trình duyệt của bạn
Loading…
Cách sử dụng
- Kéo và thả (hoặc nhấp để chọn) hình ảnh gốc của bạn vào khu vực "Trước".
- Kéo và thả (hoặc nhấp để chọn) hình ảnh bạn muốn so sánh vào khu vực "Sau".
- Nhấp vào "So Sánh Hình Ảnh" — hai hình ảnh sẽ được so sánh theo từng pixel hoàn toàn ngay trên trình duyệt của bạn.
- Xem hình ảnh khác biệt được tô sáng và tỷ lệ phần trăm pixel khác nhau, sau đó tải xuống hình ảnh khác biệt nếu cần.
Tính năng
- So sánh cấp độ pixel nhờ thư viện mã nguồn mở pixelmatch
- Tô sáng từng pixel khác nhau trên nền tối màu để dễ dàng nhận ra thay đổi
- Hiển thị số lượng chính xác và tỷ lệ phần trăm pixel khác nhau
- Cảnh báo rõ ràng các hình ảnh có kích thước không khớp thay vì so sánh sai lệch
- Xử lý 100% trên trình duyệt — hình ảnh của bạn không bao giờ được tải lên máy chủ
Câu hỏi thường gặp
Công cụ này hữu ích cho việc gì?
Rất hữu ích cho kiểm thử hồi quy trực quan (kiểm tra xem giao diện có bị thay đổi ngoài ý muốn giữa các bản build hay không), so sánh hai phiên bản thiết kế hoặc ảnh chụp màn hình, phát hiện những chỉnh sửa nhỏ trong ảnh, hoặc xác minh một hình ảnh được nén lại mà không mất chất lượng rõ rệt.
Tại sao hai hình ảnh của tôi cần có cùng kích thước?
Việc so sánh hoạt động theo từng pixel, ghép mỗi pixel của hình ảnh đầu tiên với pixel ở cùng vị trí trong hình ảnh thứ hai. Nếu hai hình ảnh có kích thước khác nhau thì sẽ không có sự tương ứng 1:1 có ý nghĩa, vì vậy công cụ sẽ hiển thị lỗi rõ ràng thay vì so sánh dữ liệu không khớp.
Hình ảnh khác biệt được tạo ra như thế nào?
Công cụ sử dụng pixelmatch, một thư viện mã nguồn mở để so sánh pixel. Các vùng trùng khớp được làm tối đi, còn các pixel khác nhau vượt quá một ngưỡng nhỏ có tính đến khử răng cưa sẽ được tô sáng bằng màu nổi bật để dễ nhận thấy ngay lập tức.
Hình ảnh của tôi có được tải lên đâu đó không?
Không. Cả hai hình ảnh được tải và so sánh hoàn toàn ngay trên trình duyệt của bạn bằng Canvas API. Không có gì được gửi đến máy chủ.
Tại sao hai hình ảnh trông giống hệt nhau vẫn có thể hiển thị một vài pixel khác biệt?
Những khác biệt nhỏ về nén, hồ sơ màu hoặc mã hóa lại có thể làm thay đổi nhẹ giá trị của từng pixel dù hình ảnh trông giống hệt nhau bằng mắt thường. Tỷ lệ phần trăm pixel khác nhau rất nhỏ thường cho thấy đây là loại nhiễu này chứ không phải thay đổi trực quan thực sự.