RoundCut hoạt động như thế nào

Câu trả lời ngắn gọn

RoundCut chạy mọi công cụ ngay trong trình duyệt của bạn bằng cách sử dụng hai API gốc của trình duyệt: HTML5 Canvas API cho các thao tác ở cấp độ pixel, và WebAssembly cho công việc nặng hơn — mã hóa/giải mã định dạng ảnh và suy luận AI. Không có gì được tải lên. Không có gì được xử lý trên máy chủ của chúng tôi, vì chúng tôi không vận hành máy chủ nào chạm vào tệp của bạn.

Bạn có thể xác minh điều này trong khoảng 30 giây: mở DevTools của trình duyệt, chuyển sang tab Network, xóa nhật ký và sử dụng bất kỳ công cụ nào. Các yêu cầu mạng duy nhất bạn thấy sẽ là cho các tài sản tĩnh của trang web — HTML, CSS, JavaScript, phông chữ và các module WebAssembly. Hình ảnh của bạn không bao giờ rời khỏi trang.

Tại sao là phía client

Hầu hết công cụ ảnh trực tuyến hoạt động theo cách ngược lại: bạn tải lên, máy chủ xử lý, bạn tải xuống kết quả. Mô hình đó có một vài nhược điểm nổi tiếng — tệp của bạn nằm trên máy của người khác, bạn chờ hai lần khứ hồi, và người vận hành trả tiền theo CPU-giây làm việc, đó là lý do tại sao các dịch vụ đó thường thêm tài khoản, hình mờ hoặc các cấp độ trả phí.

Trình duyệt đã có thể thực hiện hầu hết công việc này một cách tự nhiên trong nhiều năm. Phần tử <canvas> xử lý việc cắt, xoay, thay đổi kích thước và mã hóa lại; WebAssembly cho phép chúng tôi chạy cùng các thư viện C/Rust MozJPEG, libwebp, libavif và Oxipng mà Squoosh sử dụng, với tốc độ gần như native. Khi chúng tôi ra mắt bản tái xây dựng năm 2026, trình duyệt đã thực sự bắt kịp bộ công cụ chỉnh sửa ảnh trên máy tính. Không còn lý do gì để phải liên quan đến máy chủ nữa.

Kết quả là một stack với ba thuộc tính bổ trợ nhau: quyền riêng tư (tệp của bạn không bao giờ rời khỏi thiết bị), tốc độ (không tải lên, không hàng đợi, không khứ hồi đến máy chủ) và chi phí (chúng tôi phục vụ tài sản tĩnh từ CDN với vài xu mỗi tháng, bất kể có bao nhiêu người sử dụng công cụ).

Quy trình xử lý, từng bước

1. Bạn chọn tệp

Khi bạn chọn ảnh — qua bộ chọn tệp, kéo và thả, hoặc dán — trình duyệt chuyển cho JavaScript một đối tượng File. JavaScript đọc các byte bằng API FileReader hoặc Blob.arrayBuffer(). Tại không thời điểm nào trong bước này tệp được gửi qua mạng.

2. Trình duyệt giải mã ảnh

Các trình duyệt hiện đại có thể giải mã tự nhiên JPG, PNG, WebP, GIF, AVIF và (trên Safari và Chromium gần đây) HEIC. Chúng tôi sử dụng createImageBitmap() để chuyển đổi các byte thô thành bitmap mà GPU có thể làm việc, bên ngoài luồng chính. Đối với HEIC trên các trình duyệt không giải mã tự nhiên, chúng tôi sử dụng bộ giải mã WebAssembly chạy cục bộ trong trình duyệt của bạn.

3. Công cụ thực hiện nhiệm vụ của nó

Điều gì xảy ra tiếp theo phụ thuộc vào công cụ. RoundCut hiện có ba công cụ:

• Circle Crop — biến đổi pixel Canvas 2D với đường dẫn cắt hình tròn. Bitmap được vẽ vào <canvas> ở góc xoay và thu phóng đã chọn, clip tròn được áp dụng, và phần bên trong vòng tròn được đọc lại dưới dạng ImageData. Cropper.js xử lý khung cắt tương tác.
• Compress — mã hóa lại JPG, PNG, WebP hoặc AVIF bằng các module WebAssembly jSquash (MozJPEG, libwebp, libavif, Oxipng). Đây là các codec thượng nguồn giống như Squoosh sử dụng. Chúng chạy trong Web Worker để giao diện vẫn phản hồi trong khi mã hóa ảnh nhiều megapixel, và xem trước cạnh nhau cho phép bạn thấy sự đánh đổi trước khi xác nhận.
• Remove Background — một mô hình AI nhỏ ở định dạng ONNX (vài MB, tải xuống một lần và lưu vào bộ nhớ cache) chạy trong trình duyệt của bạn thông qua ONNX Runtime Web, với WebAssembly là backend thực thi. Lần chạy đầu tiên tải xuống mô hình; mọi lần sau đều là cục bộ và tức thì.

4. Bạn tải xuống kết quả

Bitmap đầu ra được mã hóa thành Blob, gói trong object URL và được cung cấp cho hộp thoại lưu tệp tiêu chuẩn của trình duyệt. Ở những nơi được hỗ trợ, chúng tôi sử dụng File System Access API để bạn có thể chọn thư mục đích trực tiếp. Tệp xuất hiện trên đĩa của bạn; không có gì đi qua máy chủ.

Cách tự xác minh

Tuyên bố “không tải lên” có thể kiểm tra được trong hai phút. Chọn phương pháp bạn thích:

Phương pháp 1 — Theo dõi tab Network

1. Mở RoundCut trong tab mới.
2. Mở DevTools (F12 hoặc nhấp chuột phải → Kiểm tra) và chuyển sang tab Network.
3. Nhấp vào nút “xóa” trong tab Network để bắt đầu lại.
4. Sử dụng bất kỳ công cụ nào: tải ảnh lên, chỉnh sửa, tải kết quả xuống.
5. Xem nhật ký Network. Bạn sẽ thấy các yêu cầu cho HTML, CSS, JS, phông chữ và (khi sử dụng công cụ nặng hơn lần đầu) module WebAssembly liên quan. Bạn sẽ không thấy bất kỳ yêu cầu nào chứa byte của ảnh.

Cột “Initiator” cho biết script nào đã kích hoạt mỗi yêu cầu, và cột “Type” cho biết những gì đã được gửi. Lọc theo “Fetch/XHR” để tập trung vào các yêu cầu dữ liệu; bạn sẽ thấy tất cả đều nhỏ, tất cả đều đến nguồn gốc tĩnh và không có yêu cầu nào chứa tệp của bạn.

Phương pháp 2 — Sử dụng công cụ ngoại tuyến

1. Tải bất kỳ trang công cụ RoundCut nào. Sử dụng một lần để đảm bảo các module WebAssembly liên quan đã được lưu vào bộ nhớ cache.
2. Mở DevTools, chuyển đến tab Network và đánh dấu vào ô Offline (hoặc đơn giản là tắt Wi-Fi).
3. Tải lại trang. Nó vẫn tải, vì trình duyệt đã lưu các tài sản tĩnh vào bộ nhớ cache.
4. Sử dụng công cụ lại, từ đầu đến cuối. Nó vẫn hoạt động.

Nếu công cụ hoạt động ngoại tuyến, theo định nghĩa nó không liên hệ với máy chủ trong quá trình thao tác. Đây là bằng chứng mạnh nhất có thể — công việc xảy ra trên máy của bạn vì không có máy nào khác có thể tiếp cận.

Những gì chúng tôi thấy

Để rõ ràng về những gì được thu thập: khi bạn tải một trang, nhà cung cấp phân tích của chúng tôi (Cloudflare Web Analytics) ghi lại rằng một trình duyệt nào đó đã tải URL đó từ một quốc gia nào đó. Không có cookie, không có mã định danh liên tục, không có gì gắn với một người.

Đối với các công cụ tải xuống module WebAssembly khi sử dụng lần đầu (codec jSquash, mô hình ONNX xóa nền), nhà cung cấp hosting của chúng tôi thấy rằng ai đó đã tải module — giống như thấy họ tải tệp CSS. Bản thân module không chứa bất kỳ thông tin nào về ảnh của bạn.

Bộ dữ liệu đầy đủ có trong chính sách quyền riêng tư của chúng tôi.

Stack công nghệ

Dành cho những ai tò mò, đây là những gì RoundCut được xây dựng trên:

• Astro — bộ tạo trang web tĩnh. Mỗi trang được gửi dưới dạng HTML thuần túy với các “islands” JavaScript được cải thiện dần dần chỉ ở nơi có các công cụ tương tác.
• CSS thuần với thuộc tính tùy chỉnh — không Tailwind, không CSS-in-JS. Toàn bộ hệ thống thiết kế là một tệp tokens.css duy nhất.
• jSquash — liên kết WebAssembly đến MozJPEG, libwebp, libavif và Oxipng để mã hóa ảnh.
• Cropper.js — lớp tương tác hình chữ nhật cắt cho các công cụ cắt.
• ONNX Runtime Web — chạy mô hình xóa nền trong trình duyệt của bạn qua WebAssembly.
• Cloudflare Pages — lưu trữ bản dựng tĩnh, phục vụ từ edge và cung cấp DNS cùng bảo vệ DDoS.
• Cloudflare Web Analytics — đếm lượt xem trang tổng hợp, không có cookie.

Hỗ trợ trình duyệt

Tất cả công cụ hoạt động trên phiên bản hiện tại và trước đó của Chrome, Firefox, Safari và Edge — máy tính để bàn và di động. Trang web sử dụng cải tiến dần dần: ở những nơi trình duyệt hỗ trợ API mới hơn (ví dụ: showSaveFilePicker, OffscreenCanvas), chúng tôi sử dụng nó; ở những nơi không hỗ trợ, chúng tôi sử dụng tương đương cũ hơn. Không có tường “trình duyệt của bạn không được hỗ trợ”.

Yêu cầu duy nhất là JavaScript. Khi JavaScript bị vô hiệu hóa, các công cụ không thể chạy — không có dự phòng phía máy chủ vì không có máy chủ nào thực hiện công việc xử lý ảnh.

Câu hỏi

Có điều gì chúng tôi chưa đề cập? Gửi email cho chúng tôi tại support@araluma.com. Câu hỏi kỹ thuật được chào đón.