Πώς λειτουργεί το RoundCut

Η σύντομη απάντηση

Το RoundCut εκτελεί κάθε εργαλείο στο πρόγραμμα περιήγησής σας χρησιμοποιώντας δύο εγγενή API του browser: το HTML5 Canvas API για λειτουργίες σε επίπεδο pixel και το WebAssembly για τις πιο βαριές εργασίες — κωδικοποίηση/αποκωδικοποίηση μορφών εικόνας και συμπέρανση τεχνητής νοημοσύνης. Δεν ανεβαίνει τίποτα. Τίποτα δεν επεξεργάζεται στους διακομιστές μας, επειδή δεν διαθέτουμε διακομιστές που αγγίζουν τα αρχεία σας.

Μπορείτε να το επαληθεύσετε σε περίπου 30 δευτερόλεπτα: ανοίξτε τα DevTools του browser σας, μεταβείτε στην καρτέλα Network, διαγράψτε το αρχείο καταγραφής και χρησιμοποιήστε οποιοδήποτε εργαλείο. Τα μόνα αιτήματα δικτύου που θα δείτε αφορούν στατικά στοιχεία ιστότοπου — HTML, CSS, JavaScript, γραμματοσειρές και τα modules WebAssembly. Η εικόνα σας δεν εγκαταλείπει ποτέ τη σελίδα.

Γιατί από την πλευρά του client

Τα περισσότερα διαδικτυακά εργαλεία εικόνας λειτουργούν αντίστροφα: ανεβάζετε, ένας διακομιστής επεξεργάζεται, κατεβάζετε το αποτέλεσμα. Αυτό το μοντέλο έχει μερικά γνωστά μειονεκτήματα — το αρχείο σας βρίσκεται στον υπολογιστή κάποιου άλλου, περιμένετε δύο φορές το ταξίδι μετ’ επιστροφής, και ο φορέας πληρώνει ανά CPU-δευτερόλεπτο εργασίας, γι’ αυτό αυτές οι υπηρεσίες τείνουν να προσθέτουν λογαριασμούς, υδατογραφήματα ή επί πληρωμή επίπεδα.

Οι browsers είναι ικανοί να κάνουν το μεγαλύτερο μέρος αυτής της εργασίας εγγενώς εδώ και χρόνια. Το στοιχείο <canvas> διαχειρίζεται την περικοπή, την περιστροφή, την αλλαγή μεγέθους και την επανακωδικοποίηση· το WebAssembly μας επιτρέπει να εκτελούμε τις ίδιες βιβλιοθήκες C/Rust MozJPEG, libwebp, libavif και Oxipng που χρησιμοποιεί το Squoosh, σε ταχύτητα σχεδόν εγγενή. Όταν κυκλοφορήσαμε την ανακατασκευή του 2026, ο browser είχε ουσιαστικά φτάσει το επίπεδο των εργαλείων επεξεργασίας εικόνας επιτραπέζιου υπολογιστή. Δεν υπήρχε πλέον λόγος να εμπλέκεται ένας διακομιστής.

Το αποτέλεσμα είναι ένας stack με τρεις αλληλοενισχυόμενες ιδιότητες: ιδιωτικότητα (το αρχείο σας δεν εγκαταλείπει ποτέ τη συσκευή σας), ταχύτητα (χωρίς μεταφόρτωση, χωρίς ουρά, χωρίς μετ’ επιστροφής στον διακομιστή) και κόστος (εξυπηρετούμε στατικά στοιχεία από ένα CDN με λίγα λεπτά το μήνα, ανεξάρτητα από το πόσοι χρησιμοποιούν τα εργαλεία).

Η διαδικασία, βήμα προς βήμα

1. Επιλέγετε ένα αρχείο

Όταν επιλέξετε μια εικόνα — μέσω του επιλογέα αρχείων, μεταφοράς και απόθεσης ή επικόλλησης — ο browser μεταδίδει στη JavaScript ένα αντικείμενο File. Η JavaScript διαβάζει τα bytes χρησιμοποιώντας το API FileReader ή Blob.arrayBuffer(). Σε κανένα σημείο αυτού του βήματος δεν αποστέλλεται το αρχείο μέσω δικτύου.

2. Ο browser αποκωδικοποιεί την εικόνα

Σύγχρονοι browsers μπορούν εγγενώς να αποκωδικοποιήσουν JPG, PNG, WebP, GIF, AVIF και (σε Safari και πρόσφατο Chromium) HEIC. Χρησιμοποιούμε createImageBitmap() για να μετατρέψουμε τα ακατέργαστα bytes σε bitmap με το οποίο μπορεί να εργαστεί η GPU, εκτός του κύριου thread. Για HEIC σε browsers που δεν το αποκωδικοποιούν εγγενώς, καταφεύγουμε σε έναν αποκωδικοποιητή WebAssembly που εκτελείται τοπικά στον browser σας.

3. Το εργαλείο κάνει τη δουλειά του

Τι συμβαίνει στη συνέχεια εξαρτάται από το εργαλείο. Το RoundCut διαθέτει αυτή τη στιγμή τρία:

• Circle Crop — μετασχηματισμός pixel Canvas 2D με κυκλική διαδρομή αποκοπής. Το bitmap σχεδιάζεται σε <canvas> με την επιλεγμένη περιστροφή και ζουμ, εφαρμόζεται η κυκλική αποκοπή και το εσωτερικό του κύκλου διαβάζεται ξανά ως ImageData. Το Cropper.js χειρίζεται το διαδραστικό πλαίσιο περικοπής.
• Compress — επανακωδικοποιεί JPG, PNG, WebP ή AVIF χρησιμοποιώντας WebAssembly modules του jSquash (MozJPEG, libwebp, libavif, Oxipng). Αυτά είναι τα ίδια upstream codecs που χρησιμοποιεί το Squoosh. Εκτελούνται σε Web Worker ώστε το UI να παραμένει αποκριτικό κατά την κωδικοποίηση μιας φωτογραφίας πολλών megapixel, και μια προεπισκόπηση δίπλα-δίπλα σάς επιτρέπει να δείτε τον συμβιβασμό πριν επιβεβαιώσετε.
• Remove Background — ένα μικρό μοντέλο AI σε μορφή ONNX (μερικά MB, λαμβάνεται μία φορά και αποθηκεύεται στη μνήμη cache) εκτελείται στον browser σας μέσω ONNX Runtime Web, με WebAssembly ως backend εκτέλεσης. Η πρώτη εκτέλεση λαμβάνει το μοντέλο· κάθε επόμενη είναι τοπική και άμεση.

4. Κατεβάζετε το αποτέλεσμα

Το bitmap εξόδου κωδικοποιείται σε Blob, τυλίγεται σε object URL και προσφέρεται στο τυπικό παράθυρο αποθήκευσης αρχείων του browser σας. Όπου υποστηρίζεται, χρησιμοποιούμε το File System Access API ώστε να μπορείτε να επιλέξετε απευθείας τον φάκελο προορισμού. Το αρχείο εμφανίζεται στον δίσκο σας· τίποτα δεν μεταφέρεται μέσω διακομιστή.

Πώς να το επαληθεύσετε μόνοι σας

Ο ισχυρισμός «χωρίς μεταφόρτωση» μπορεί να επαληθευτεί σε δύο λεπτά. Επιλέξτε όποια μέθοδο προτιμάτε:

Μέθοδος 1 — Παρακολουθήστε την καρτέλα Network

1. Ανοίξτε το RoundCut σε νέα καρτέλα.
2. Ανοίξτε τα DevTools (F12 ή δεξί κλικ → Επιθεώρηση) και μεταβείτε στην καρτέλα Network.
3. Κάντε κλικ στο κουμπί «διαγραφή» στην καρτέλα Network για να ξεκινήσετε από την αρχή.
4. Χρησιμοποιήστε οποιοδήποτε εργαλείο: φορτώστε μια εικόνα, επεξεργαστείτε την, κατεβάστε το αποτέλεσμα.
5. Κοιτάξτε το αρχείο καταγραφής Network. Θα δείτε αιτήματα για HTML, CSS, JS, γραμματοσειρές και (κατά την πρώτη χρήση ενός βαρύτερου εργαλείου) το σχετικό module WebAssembly. Δεν θα δείτε κανένα αίτημα που να περιέχει τα bytes της εικόνας σας.

Η στήλη «Initiator» σάς λέει ποιο script ενεργοποίησε κάθε αίτημα, και η στήλη «Type» σάς λέει τι στάλθηκε. Φιλτράρετε κατά «Fetch/XHR» για να εστιάσετε στα αιτήματα δεδομένων· θα δείτε ότι είναι όλα μικρά, όλα προς την στατική προέλευση, και κανένα δεν περιέχει το αρχείο σας.

Μέθοδος 2 — Χρησιμοποιήστε τα εργαλεία εκτός σύνδεσης

1. Φορτώστε οποιαδήποτε σελίδα εργαλείου του RoundCut. Χρησιμοποιήστε το μία φορά για να βεβαιωθείτε ότι τα σχετικά modules WebAssembly είναι αποθηκευμένα στη μνήμη cache.
2. Ανοίξτε τα DevTools, μεταβείτε στην καρτέλα Network και επιλέξτε το πλαίσιο Offline (ή απλά απενεργοποιήστε το Wi-Fi).
3. Φορτώστε ξανά τη σελίδα. Φορτώνεται ακόμα, επειδή ο browser έχει αποθηκεύσει τα στατικά στοιχεία στη μνήμη cache.
4. Χρησιμοποιήστε ξανά το εργαλείο από την αρχή έως το τέλος. Εξακολουθεί να λειτουργεί.

Εάν το εργαλείο λειτούργησε εκτός σύνδεσης, εξ ορισμού δεν επικοινώνησε με έναν διακομιστή κατά τη λειτουργία. Αυτή είναι η ισχυρότερη δυνατή απόδειξη — η εργασία έγινε στον υπολογιστή σας επειδή δεν υπήρχε άλλος υπολογιστής προσβάσιμος.

Τι βλέπουμε εμείς

Για να είμαστε σαφείς σχετικά με αυτό που συλλέγεται: όταν φορτώνετε μια σελίδα, ο πάροχος αναλυτικών μας (Cloudflare Web Analytics) καταγράφει ότι κάποιος browser φόρτωσε αυτό το URL από κάποια χώρα. Χωρίς cookies, χωρίς μόνιμα αναγνωριστικά, τίποτα συνδεδεμένο με ένα άτομο.

Για εργαλεία που λαμβάνουν ένα module WebAssembly κατά την πρώτη χρήση (codecs jSquash, το μοντέλο ONNX αφαίρεσης φόντου), ο πάροχος φιλοξενίας μας βλέπει ότι κάποιος έφερε το module — όπως βλέπει κάποιον να φέρει το αρχείο CSS. Το ίδιο το module δεν περιέχει καμία πληροφορία σχετικά με την εικόνα σας.

Το πλήρες απόθεμα δεδομένων βρίσκεται στην πολιτική απορρήτου μας.

Η τεχνολογική στοίβα

Για τους περίεργους, ορίστε τι χρησιμοποιεί το RoundCut:

• Astro — η γεννήτρια στατικών ιστότοπων. Κάθε σελίδα αποστέλλεται ως απλή HTML με προοδευτικά βελτιωμένα JavaScript «islands» μόνο όπου βρίσκονται τα διαδραστικά εργαλεία.
• Vanilla CSS με custom properties — χωρίς Tailwind, χωρίς CSS-in-JS. Το πλήρες σύστημα σχεδιασμού είναι ένα μόνο αρχείο tokens.css.
• jSquash — WebAssembly bindings για MozJPEG, libwebp, libavif και Oxipng για κωδικοποίηση εικόνων.
• Cropper.js — το layer αλληλεπίδρασης του ορθογωνίου περικοπής για τα εργαλεία περικοπής.
• ONNX Runtime Web — εκτελεί το μοντέλο αφαίρεσης φόντου στον browser σας μέσω WebAssembly.
• Cloudflare Pages — φιλοξενεί το στατικό build, το εξυπηρετεί από το edge και παρέχει DNS και προστασία DDoS.
• Cloudflare Web Analytics — συγκεντρωτική, χωρίς cookies καταμέτρηση προβολών σελίδας.

Υποστήριξη browser

Όλα τα εργαλεία λειτουργούν στην τρέχουσα και στην προηγούμενη έκδοση των Chrome, Firefox, Safari και Edge — επιτραπέζιους και κινητούς υπολογιστές. Ο ιστότοπος χρησιμοποιεί προοδευτική βελτίωση: όπου ένας browser υποστηρίζει ένα νεότερο API (π.χ. showSaveFilePicker, OffscreenCanvas), το χρησιμοποιούμε· όπου δεν υποστηρίζει, χρησιμοποιούμε το παλαιότερο ισοδύναμο. Δεν υπάρχει τοίχος «ο browser σας δεν υποστηρίζεται».

Η μόνη απαραίτητη προϋπόθεση είναι η JavaScript. Με απενεργοποιημένη JavaScript, τα εργαλεία δεν μπορούν να εκτελεστούν — δεν υπάρχει εναλλακτική λύση από την πλευρά του διακομιστή επειδή δεν υπάρχει διακομιστής που εκτελεί εργασίες επεξεργασίας εικόνων.

Ερωτήσεις

Κάτι που δεν καλύψαμε; Στείλτε email στη διεύθυνση support@araluma.com. Τεχνικές ερωτήσεις είναι ευπρόσδεκτες.