Xây dựng công cụ xóa Watermark miễn phí trên trình duyệt với Canvas API

Gần đây, tôi đã phát triển CleanMark — một công cụ xóa Watermark (dấu mờ) miễn phí chạy trực tiếp trên trình duyệt. Công cụ này hoạt động hoàn toàn cục bộ, không yêu cầu tải ảnh lên máy chủ, không cần đăng ký tài khoản và hoàn toàn miễn phí.

Bạn có thể trải nghiệm công cụ tại đây: https://cleanmark.org

Ý tưởng cốt lõi

Đa số các công cụ xóa Watermark hiện nay đều yêu cầu gửi hình ảnh của bạn đến một máy chủ (server) để xử lý. Tuy nhiên, CleanMark thực hiện mọi thao tác xử lý trực tiếp trên thiết bị của bạn thông qua Canvas API của trình duyệt. Điều này đồng nghĩa với việc hình ảnh của bạn không bao giờ rời khỏi thiết bị cá nhân, đảm bảo tính bảo mật tuyệt đối.

Cơ chế hoạt động của Inpainting trên Canvas

Kỹ thuật được sử dụng ở đây gọi là inpainting — quá trình điền đầy vào một vùng được chọn dựa trên các điểm ảnh xung quanh đó.

Dưới đây là quy trình hoạt động cơ bản:

• Người dùng chọn vùng chứa Watermark bằng công cụ cọ vẽ hoặc hình chữ nhật.
• Vùng được chọn sẽ trở thành một lớp mặt nạ (mask): màu trắng đại diện cho vùng cần xóa, màu đen đại diện cho vùng cần giữ lại.
• Đối với mỗi điểm ảnh trong vùng mặt nạ, hệ thống sẽ lấy mẫu từ các điểm ảnh lân cận không bị che khuất.
• Điền vào vùng đã chọn bằng cách sử dụng trung bình có trọng số của các điểm ảnh lân cận đó.

Chiến lược lấy mẫu đóng vai trò rất quan trọng. Một cách tiếp cận sơ đẳng chỉ đơn giản là lấy trung bình các điểm ảnh gần đó, điều này thường tạo ra một mảng ảnh bị nhòe (blur). Một cách tiếp cận tối ưu hơn là sử dụng phương pháp khớp mảnh ảnh (patch-based matching) — tìm một vùng kết cấu tương tự ở chỗ khác trong hình ảnh và sao chép nó vào.

Đối với CleanMark, tôi đã triển khai một phương pháp xấp xỉ nhanh chóng:

• Quét ra ngoài từ mỗi điểm ảnh bị che khuất theo các vòng đồng tâm.
• Gán trọng số cao hơn cho các điểm ảnh ở gần.
• Áp dụng một chút hiệu ứng làm mờ để hòa trộn các đường viền một cách tự nhiên.

Phương pháp này hoạt động hiệu quả với các nền đơn giản (dải màu, màu sắc đặc, kết cấu), bao phủ hầu hết các trường hợp sử dụng xóa Watermark phổ biến.

Tại sao chỉ chạy trên trình duyệt?

• Quyền riêng tư: Hình ảnh của bạn luôn nằm trên thiết bị, không bị gửi đi đâu.
• Chi phí: Không cần duy trì máy chủ (server) đồng nghĩa với việc không có chi phí hosting.
• Tốc độ: Không có thời gian chờ đợi cho quá trình tải lên và tải xuống dữ liệu.

Ngăn xếp công nghệ (Stack)

• Next.js (App Router)
• Canvas API để xử lý hình ảnh
• next-intl cho tính năng đa ngôn ngữ (Tiếng Anh và Tiếng Trung)

Kế hoạch phát triển tiếp theo

• Cải thiện chất lượng thuật toán inpainting cho các nền phức tạp.
• Thêm tính năng xử lý hàng loạt (batch processing).
• Mã nguồn mở thuật toán cốt lõi để cộng đồng cùng đóng góp.

Nếu bạn đang có ý định xây dựng các công cụ hình ảnh trên trình duyệt, hãy nhớ rằng Canvas API mạnh mẽ hơn nhiều so với suy nghĩ của đa số mọi người. Tôi rất sẵn lòng giải đáp các thắc mắc về việc triển khai chi tiết của công cụ này.