Tạo Ảnh So Sánh
Before & After
So sánh hai hình ảnh bằng thanh trượt tương tác theo thời gian thực.
Xuất kết quả so sánh dưới dạng file PNG — tuyệt vời để chia sẻ tiến độ/kết quả.
📷 Ảnh Before (Trước)
✨ Ảnh After (Sau)
Bạn cũng có thể thích
Giới thiệu
Công cụ Before & After Comparison Slider cho phép bạn so sánh hai hình ảnh bằng một thanh trượt kéo thả tương tác. Cực kỳ hữu ích cho công việc chỉnh sửa ảnh, theo dõi tiến độ xây dựng, fitness... Công cụ chạy hoàn toàn trên trình duyệt bằng Canvas API.
Bạn có thể kéo thanh trượt đến bất kỳ vị trí nào và lưu lại trạng thái so sánh đó dưới dạng file PNG. Không có dữ liệu hình ảnh nào bị gửi lên bất kỳ máy chủ nào, đảm bảo an toàn tuyệt đối.
Cách sử dụng
Chọn Ảnh
Tải ảnh Trước (Before) và Sau (After) lên bằng cách bấm vào hoặc kéo thả file.
Kéo Thanh Trượt
Kéo thanh trượt trong vùng hiển thị để điều chỉnh đường phân chia giữa hai ảnh.
Xuất Ảnh
Bấm "Lưu ảnh PNG" để tải ảnh kết quả chính xác tại vị trí thanh trượt mà bạn đang dừng.
Thuật ngữ
- Before & After (Trước & Sau)
- Trình bày trực quan so sánh trạng thái trước và sau khi xử lý, xây dựng hoặc chỉnh sửa. Dùng hai hình ảnh đại diện cho hai trạng thái.
- So sánh bằng thanh trượt
- Giao diện tương tác cho phép kéo thanh trượt sang trái/phải để hiện hình ảnh trước hoặc sau trong cùng một khung hình.
- Canvas API
- API vẽ đồ họa 2D của HTML5. Dùng để render hai ảnh lên cùng một canvas và "cắt" (clip) theo vị trí thanh trượt để tạo giao diện so sánh.
- Pointer Events API
- API xử lý thống nhất các thao tác chuột, cảm ứng và bút vẽ, giúp thanh trượt kéo thả mượt mà trên mọi thiết bị.
- Clipping (Cắt khung hiển thị)
- Giới hạn vùng vẽ thành một hình dạng cụ thể. Trong thanh trượt before/after, canvas được cắt tại vị trí thanh trượt.
- Tỷ lệ khung hình (Aspect Ratio)
- Tỷ lệ giữa chiều rộng và chiều cao của ảnh. Cả hai ảnh nên có cùng tỷ lệ khung hình để việc so sánh diễn ra tự nhiên nhất.
- PNG
- Định dạng ảnh không bị mất chất lượng khi lưu, hỗ trợ nền trong suốt. Dùng làm định dạng xuất file của công cụ này.
- WebP
- Định dạng ảnh hiện đại của Google, dung lượng nhỏ hơn JPEG/PNG nhưng chất lượng tương đương. Được hỗ trợ dưới dạng ảnh đầu vào.
FAQ
- Q.Nếu hai hình ảnh có kích thước khác nhau thì sao?
- Cả hai hình ảnh sẽ được tự động thay đổi kích thước cho bằng nhau (giữ nguyên tỷ lệ khung hình) để dễ so sánh.
- Q.Tôi có thể xuất file PNG ở vị trí thanh trượt hiện tại không?
- Có. Bấm "Lưu ảnh PNG" để tải ảnh xuống y như những gì đang hiển thị trên màn hình.
- Q.Tôi có thể ẩn chữ BEFORE/AFTER không?
- Có. Chỉ cần bỏ tích ô "Hiện Nhãn" là các chữ này sẽ biến mất khỏi ảnh xuất ra.
- Q.Có hỗ trợ ảnh dọc (portrait) hay ngang (landscape) không?
- Có. Công cụ hỗ trợ cả hai hướng ảnh, và bạn cũng có thể chuyển đổi thanh trượt sang dạng trượt Ngang hoặc Dọc tùy ý.
- Q.Ảnh của tôi có bị gửi lên máy chủ không?
- Không. Mọi thao tác xử lý ảnh đều được thực hiện ngay trên trình duyệt (sử dụng Canvas API). Dữ liệu ảnh tuyệt đối không gửi ra ngoài.
- Q.Hỗ trợ định dạng ảnh nào?
- Công cụ hỗ trợ JPEG, PNG, WebP, GIF (tĩnh) và bất kỳ định dạng nào mà trình duyệt của bạn có thể đọc được.
- Q.Thanh trượt có dùng được trên điện thoại không?
- Có. Hỗ trợ hoàn toàn cảm ứng — bạn chỉ cần vuốt ngón tay sang trái hoặc phải trên khu vực so sánh.
- Q.Tôi có thể so sánh nhiều cặp ảnh cùng lúc không?
- Hiện tại chỉ hỗ trợ một cặp mỗi lần. Bạn có thể xuất file PNG, sau đó bấm Xóa trắng để tải cặp ảnh mới lên.
Ứng dụng
Chỉnh sửa Ảnh (Retouch)
So sánh trước và sau khi chỉnh sửa bằng Photoshop/Lightroom và chia sẻ với khách hàng.
Xây dựng & Cải tạo
Thể hiện sự khác biệt trước và sau của một dự án thi công nội thất, cải tạo nhà cửa.
Fitness & Làm đẹp
So sánh trực quan kết quả của quá trình giảm cân, tập gym hoặc phẫu thuật thẩm mỹ.
Làm vườn & DIY
Ghi lại và chia sẻ quá trình biến đổi khu vườn hoặc các dự án tự làm đồ thủ công (DIY).
Gửi phản hồi
Vui lòng cho chúng tôi biết suy nghĩ của bạn để giúp chúng tôi cải thiện công cụ.
Feedback is temporarily suspended
The server is busy or spam protection is active. Please try again later.