So sánh hình ảnh

Tải hai hình ảnh và so sánh chúng bằng thanh trượt kéo hoặc chế độ xem cạnh nhau. Hoàn hảo cho chỉnh sửa trước/sau. Không tải lên.

Cách Thanh trượt so sánh hình ảnh hoạt động

Thanh trượt so sánh ảnh cho phép bạn tải hai ảnh cạnh nhau và kéo dải phân chia dọc để hiển thị nhiều hơn một ảnh và ít hơn ảnh kia. Bố cục trước và sau này là cách trực tiếp, ít ma sát để hiển thị sự khác biệt giữa hai phiên bản ảnh. Cả hai ảnh đều được tải từ ổ đĩa cục bộ của bạn bằng File API và hiển thị trên màn hình bởi trình duyệt; không có gì được tải lên máy chủ.

Thanh trượt sử dụng cách tiếp cận clip-path CSS để quá trình chuyển tiếp giữa hai ảnh luôn căn chỉnh theo pixel và không có hòa trộn hay nội suy tại ranh giới. Bạn cũng có thể chuyển sang chế độ màn hình chia đôi hiển thị hai ảnh trong các bảng cố định trái và phải. Công cụ hữu ích để so sánh chỉnh sửa ảnh, kết quả nén, các phiên bản thiết kế hoặc bất kỳ hai ảnh nào mà bạn cần thấy rõ sự khác biệt.

Tác giả: Bastien Sulyan

Cách sử dụng Thanh trượt so sánh hình ảnh, từng bước

Kéo thả ảnh đầu tiên (phiên bản 'trước') vào khu vực tải lên bên trái.
Kéo thả ảnh thứ hai (phiên bản 'sau') vào khu vực tải lên bên phải.
Kéo dải phân chia sang trái và phải để hiển thị nhiều hơn một ảnh mỗi lần.
Chuyển sang chế độ màn hình chia đôi để xem cả hai ảnh trong các bảng cố định nếu bạn thích so sánh tĩnh.
Dùng nút toàn màn hình để phóng to so sánh để kiểm tra chi tiết.

Trường hợp sử dụng thường gặp

Nhiếp ảnh gia so sánh xuất RAW gốc với phiên bản đã chỉnh sửa để đánh giá mức độ thay đổi ảnh của quá trình chỉnh sửa.
Lập trình viên kiểm tra cặp ảnh nén trước và sau để đánh giá xem mức mất chất lượng ở mức nén nhất định có chấp nhận được không.
Nhà thiết kế UX trình bày thiết kế lại giao diện bằng cách đặt ảnh chụp màn hình giao diện cũ ở bên trái và ảnh mới ở bên phải cho buổi đánh giá của các bên liên quan.
Biên tập viên nội dung xác minh rằng thao tác chỉnh sửa ảnh (tạo màu, cắt xén) nhất quán giữa thumbnail và phiên bản full-size.

Câu hỏi thường gặp

Hai ảnh có cần cùng kích thước không?

Công cụ hoạt động tốt nhất khi cả hai ảnh có cùng kích thước, vì thanh trượt xếp chồng chúng chính xác. Nếu ảnh khác nhau về kích thước, công cụ thu phóng chúng về kích thước hiển thị chung. Có thể xuất hiện sự lệch ở các cạnh nếu tỉ lệ khung hình khác nhau.

Ảnh có được gửi đi đâu đó để so sánh hoạt động không?

Không. Cả hai ảnh đều được tải từ hệ thống file của bạn qua File API và vẽ vào các phần tử Canvas trong trình duyệt. Việc so sánh là thao tác kết xuất phía máy khách. Không có ảnh nào rời thiết bị của bạn.

Tôi có thể so sánh ảnh từ hai URL khác nhau thay vì file cục bộ không?

Công cụ hiện tại chỉ chấp nhận file cục bộ. Tải ảnh từ URL từ xa sẽ yêu cầu trình duyệt tìm nạp chúng và phụ thuộc vào các hạn chế CORS mà nhiều host ảnh không cho phép.

Có kích thước ảnh tối đa nào mà so sánh có thể xử lý không?

Giới hạn là bộ nhớ Canvas của trình duyệt. Ảnh lên đến khoảng 20 megapixel mỗi ảnh được xử lý mà không gặp vấn đề trên hầu hết thiết bị máy tính để bàn. Ảnh rất lớn có thể làm chậm kết xuất hoặc gây lỗi bộ nhớ trên phần cứng cấp thấp.

Tôi có thể lưu ảnh chụp màn hình ở vị trí thanh trượt cụ thể không?

Công cụ chụp màn hình của hệ điều hành (hoặc tính năng chụp màn hình của trình duyệt trong DevTools) là cách đơn giản để chụp vị trí thanh trượt cụ thể. Bản thân chế độ so sánh không có nút xuất tích hợp cho ảnh đã hợp nhất.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh