So sánh hai ảnh cạnh nhau với tô sáng khác biệt và so sánh bằng thanh trượt. Hoàn hảo cho so sánh chất lượng và so sánh hiệu ứng trước/sau.
Features
- Nhiều chế độ so sánh: Hỗ trợ các chế độ so sánh cạnh nhau và thanh trượt để đáp ứng nhu cầu so sánh khác nhau
- Hiển thị tô sáng khác biệt: Tự động phát hiện và tô sáng vùng khác biệt giữa hai ảnh, hiển thị trực quan vị trí khác biệt
- Thanh trượt tương tác: Ở chế độ so sánh thanh trượt, kéo thanh trượt để xem các vùng khác nhau để so sánh chi tiết chính xác
- Phát hiện pixel chính xác: Sử dụng thuật toán so sánh ở mức pixel để phát hiện chính xác sự khác biệt ảnh, hỗ trợ ngưỡng khác biệt tùy chỉnh
Usage Guide
- Bước 1: Tải hai ảnh lên để so sánh.
- Bước 2: Chọn chế độ so sánh (cạnh nhau hoặc thanh trượt) và bật tô sáng khác biệt (tùy chọn).
- Bước 3: Xem kết quả so sánh, điều chỉnh vị trí thanh trượt hoặc ngưỡng khác biệt để có hiệu ứng so sánh tốt nhất.
Technical Details
Nguyên lý so sánh ảnh
So sánh ảnh phát hiện sự khác biệt giữa hai ảnh ở mức pixel. So sánh cạnh nhau: hiển thị hai ảnh cạnh nhau để so sánh trực quan; so sánh bằng thanh trượt: sử dụng thanh trượt để điều khiển vùng hiển thị, kéo trái/phải để xem các phần khác nhau; tô sáng khác biệt: tính toán sự khác biệt pixel giữa hai ảnh, tô sáng vùng khác biệt bằng màu đỏ. Sử dụng getImageData() của API Canvas để lấy dữ liệu pixel, so sánh giá trị RGB từng pixel, tính toán sự khác biệt và trực quan hóa.
Phát hiện khác biệt pixel
Cách thực hiện: tải hai ảnh lên Canvas → getImageData() để lấy dữ liệu pixel → so sánh giá trị RGB từng pixel → tính toán sự khác biệt (|R1-R2|+|G1-G2|+|B1-B2|) → đánh dấu là khác biệt nếu vượt quá ngưỡng → tạo ảnh khác biệt (tô sáng đỏ cho vùng khác biệt). Hỗ trợ: ngưỡng khác biệt tùy chỉnh, xem trước thời gian thực, tương tác thanh trượt, hiển thị cạnh nhau, v.v.
Kịch bản sáng tạo và thực tế
So sánh ảnh được sử dụng cho: xem xét thiết kế (so sánh mockup thiết kế và triển khai), kiểm tra chất lượng (so sánh ảnh gốc và nén), so sánh trước/sau (so sánh hiệu ứng trước và sau xử lý), so sánh phiên bản (so sánh các phiên bản khác nhau của ảnh), xác minh kiểm tra (so sánh kết quả mong đợi và thực tế), nghiên cứu học tập (so sánh hiệu ứng của các tham số khác nhau). Giúp nhanh chóng phát hiện sự khác biệt ảnh và thực hiện đánh giá chất lượng, một công cụ thực tế cho xử lý ảnh.
Frequently Asked Questions
- Các chế độ so sánh nào có sẵn?
- Công cụ cung cấp hai chế độ so sánh: cạnh nhau (hiển thị hai ảnh cạnh nhau để so sánh tổng thể) và thanh trượt (sử dụng thanh trượt để điều khiển vùng hiển thị, kéo để xem các phần khác nhau). Chế độ thanh trượt phù hợp cho các kịch bản yêu cầu so sánh chi tiết chính xác.
- Tô sáng khác biệt hoạt động như thế nào?
- Tô sáng khác biệt so sánh hai ảnh ở mức pixel, tính toán giá trị khác biệt RGB cho mỗi pixel. Khi sự khác biệt vượt quá ngưỡng đã đặt, vùng đó được tô sáng bằng màu đỏ. Bạn có thể điều chỉnh ngưỡng khác biệt để kiểm soát độ nhạy của tô sáng.
- Có thể so sánh ảnh có kích thước khác nhau không?
- Có, công cụ tự động xử lý ảnh có kích thước khác nhau. Đối với phát hiện khác biệt, nó sử dụng kích thước của ảnh lớn hơn làm tham chiếu, ảnh nhỏ hơn được hiển thị theo tỷ lệ.
- Làm thế nào để sử dụng so sánh thanh trượt?
- Ở chế độ so sánh thanh trượt, kéo thanh trượt ở giữa để điều khiển vùng hiển thị. Bên trái thanh trượt hiển thị ảnh đầu tiên, bên phải hiển thị ảnh thứ hai. Kéo thanh trượt để so sánh chính xác chi tiết của các vùng khác nhau.
- Làm thế nào để đặt ngưỡng khác biệt?
- Ngưỡng khác biệt kiểm soát độ nhạy của phát hiện khác biệt. Ngưỡng thấp hơn phát hiện sự khác biệt tinh tế dễ dàng hơn; ngưỡng cao hơn chỉ hiển thị sự khác biệt rõ ràng. Nên điều chỉnh dựa trên nhu cầu thực tế, thường đặt giữa 20-50.
Related Documentation
- MDN - Canvas API - API Canvas HTML5 để thao tác và xử lý ảnh
- MDN - ImageData API - Tài liệu giao diện Canvas ImageData
- Web.dev - Tối ưu hóa ảnh - Thực hành tốt nhất để tối ưu hóa ảnh trên web