Περικοπή

Περικοπή εικόνας Περικοπή εικόνας σε κύκλο

Βελτιστοποίηση

Συμπίεση εικόνας Αφαίρεση φόντου Μεγέθυνση εικόνας

Επεξεργασία

Αλλαγή μεγέθους εικόνας

Μετατροπή

Άλλα

Μετατροπή JPG σε PDF

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

Τεχνικές λεπτομέρειες για το πώς κάθε εργαλείο τρέχει, πού τρέχει και πώς μπορείτε να το ελέγξετε μόνοι σας.

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

Το RoundCut χρησιμοποιεί υβριδική αρχιτεκτονική: τα περισσότερα εργαλεία εκτελούνται εξ ολοκλήρου στο πρόγραμμα περιήγησής σας χωρίς καμία μεταφόρτωση, και μια χούφτα δρομολογούν ένα μόνο αίτημα δικτύου μέσω της δικής μας υποδομής όταν το πρόγραμμα περιήγησης δεν μπορεί να φτάσει την ποιότητα, πάντα με ένα αόρατο εναλλακτικό μονοπάτι στην πλευρά του client. Σας λέμε σε ποια διαδρομή βρίσκεστε, σε κάθε εργαλείο και σε αυτή τη σελίδα.

Ο παρακάτω πίνακας είναι ενδεικτικός, όχι εξαντλητικός (νέα εργαλεία προστίθενται τακτικά). Δείχνει ένα παράδειγμα από κάθε είδος διαδρομής:

Παράδειγμα εργαλείουΠού εκτελείται η επεξεργασία
Circle Crop (μόνο στον browser)100% στο πρόγραμμα περιήγησής σας, Canvas API. Χωρίς μεταφόρτωση, λειτουργεί εκτός σύνδεσης.
Προεπισκόπηση Compress (μόνο στον browser)100% στο πρόγραμμα περιήγησής σας, canvas.toBlob. Χωρίς μεταφόρτωση. Το ρυθμιστικό παραμένει άμεσο.
Τελική λήψη Compress (αγγίζει διακομιστή)Ένα αίτημα μετ’ επιστροφής στην υπηρεσία μας στο api.roundcut.com.br (Fastify + sharp + libvips σε VPS στη Γερμανία), με εναλλακτική στον browser.
Remove Background (αγγίζει διακομιστή)Ένα αίτημα μετ’ επιστροφής σε ένα Cloudflare Worker που εκτελεί το BiRefNet στα edge GPU της Cloudflare, με εναλλακτική WebAssembly στον browser σας όταν το cloud δεν είναι προσβάσιμο.

Η περικοπή, η αλλαγή μεγέθους, η μετατροπή μορφής (εκτός της κωδικοποίησης AVIF) και η προεπισκόπηση Compress εκτελούνται όλες πλήρως στο πρόγραμμα περιήγησής σας. Η αφαίρεση φόντου, η λήψη Compress, η μεγέθυνση με ΤΝ, η κωδικοποίηση AVIF και το PDF πολλών εικόνων δρομολογούν το καθένα ένα μόνο αίτημα και επιστρέφουν στον browser όταν το cloud δεν είναι προσβάσιμο.

Μπορείτε να επαληθεύσετε τους ισχυρισμούς για την πλευρά του client σε περίπου 30 δευτερόλεπτα: ανοίξτε τα DevTools → Network, διαγράψτε το αρχείο καταγραφής και χρησιμοποιήστε ένα εργαλείο που λειτουργεί μόνο στον browser, όπως το Circle Crop ή το ρυθμιστικό προεπισκόπησης Compress, θα δείτε μηδέν αιτήματα που να μεταφέρουν τα bytes της εικόνας σας εκτός της σελίδας. Για τα εργαλεία που αγγίζουν τον διακομιστή θα δείτε ακριβώς μία μεταφόρτωση ανά λειτουργία, σε ονομαστά endpoints.

Γιατί υβριδική αρχιτεκτονική

Τα περισσότερα διαδικτυακά εργαλεία εικόνας βρίσκονται στο ένα άκρο: ανεβάστε-τα-πάντα-σε-διακομιστή (περιμένετε για αιτήματα μετ’ επιστροφής και ο φορέας κρατά το αρχείο σας) ή όλα-στον-browser (πληρώνετε με ποιότητα και ταχύτητα στα βήματα κωδικοποίησης ή ΤΝ). Κανένα από τα δύο άκρα δεν κερδίζει παντού.

Επιλέξαμε client-side εκεί όπου οι browsers είναι ήδη εξαιρετικοί, το στοιχείο <canvas> χειρίζεται την περικοπή, την περιστροφή, την αλλαγή μεγέθους και την κωδικοποίηση προεπισκόπησης με απώλειες σε JPG/WebP, και server-side εκεί όπου ο browser εξακολουθεί να υπολείπεται μετρήσιμα:

  • Συμπίεση εικόνας, στην τελική λήψη. Το server-side sharp + libvips 8.17 παράγει αρχεία 10 έως 15% μικρότερα byte προς byte σε σχέση με τους κωδικοποιητές browser στην ίδια οπτική ποιότητα, και παρέχει πρόσβαση στη ρύθμιση ταχύτητας και chroma του AVIF και στην έξοδο JPEG XL που ο browser δεν εκθέτει. Το ρυθμιστικό και η προεπισκόπηση εξακολουθούν να εκτελούνται στον browser σας, ώστε η επανάληψη να παραμένει άμεση, μόνο το πάτημα «Download» διέρχεται από την υπηρεσία μας.
  • Αφαίρεση φόντου με ΤΝ και μεγέθυνση με ΤΝ, στη βασική διαδρομή. Τα μοντέλα (BiRefNet για κατάτμηση, υπερ-ανάλυση για μεγέθυνση) χρειάζονται μια πραγματική GPU για να ολοκληρωθούν σε δευτερόλεπτα. Οι εναλλακτικές εντός του browser λειτουργούν, αλλά είναι πιο αργές και παράγουν ένα αισθητά χονδροειδέστερο αποτέλεσμα σε μαλλιά, τρίχωμα και λεπτές άκρες.
  • Κωδικοποίηση AVIF, στη μετατροπή. Ο κωδικοποιητής AVIF εντός του browser είναι αργός σε ορισμένες συσκευές, οπότε η έξοδος AVIF δρομολογεί ένα αίτημα στο Worker συμπίεσης, με μια κωδικοποίηση στο κύριο thread του browser ως εναλλακτική.

Το κόστος που αποδεχόμαστε για να είμαστε server-side σε αυτές τις διαδρομές είναι ένα αίτημα μετ’ επιστροφής ανά λειτουργία. Το κόστος που αποφεύγουμε παραμένοντας client-side παντού αλλού είναι το τέλος αυτού του αιτήματος στα τμήματα της ροής εργασίας που επαναλαμβάνονται πιο γρήγορα.

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

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

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

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

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

3. Το εργαλείο κάνει τη δουλειά του, εδώ διακλαδίζονται οι διαδρομές

  • Εργαλεία μόνο στον browser (περικοπή, αλλαγή μεγέθους, μετατροπή μορφής σε PNG/JPEG/WebP, η προεπισκόπηση Compress). Ένας μετασχηματισμός pixel Canvas 2D ή ένας κωδικοποιητής WebAssembly επανακωδικοποιεί το bitmap τοπικά. Το αποτέλεσμα είναι έτοιμο χωρίς καμία μεταφόρτωση. Το Cropper.js χειρίζεται το διαδραστικό πλαίσιο περικοπής για τα εργαλεία περικοπής, και το canvas.toBlob χειρίζεται την επανακωδικοποίηση προεπισκόπησης. Εξ ολοκλήρου στον browser σας.
  • Compress, λήψη. Όταν πατάτε «Download», η εικόνα αποστέλλεται μία φορά στο api.roundcut.com.br (μια υπηρεσία Fastify που εκτελείται σε VPS στη Γερμανία, φιλοξενούμενη από την Hostinger, Node 24 + sharp 0.34 + libvips 8.17, οι ίδιες βιβλιοθήκες C που χρησιμοποιεί το Squoosh στη διαδρομή του διακομιστή). Επανακωδικοποιείται με τις ίδιες παραμέτρους που ορίσατε στην προεπισκόπηση και τα bytes επιστρέφουν ροϊκά στον browser σας. Η υπηρεσία τηρεί ένα απομονωμένο ανά tenant, content-addressed cache (hash των bytes εισόδου και των παραμέτρων) με ανώτατο όριο 500 MB, ώστε η επανάληψη της ίδιας εικόνας με τις ίδιες ρυθμίσεις να επαναχρησιμοποιεί τα αποθηκευμένα bytes, το cache δεν ευρετηριάζεται βάσει της ταυτότητάς σας, της IP ή του ονόματος αρχείου. Εάν η υπηρεσία δεν είναι προσβάσιμη, το εργαλείο επιστρέφει στο blob προεπισκόπησης εντός του browser.
  • Remove Background, βασική διαδρομή cloud. Η εικόνα μεταφορτώνεται μία φορά σε ένα Cloudflare Worker, αποθηκεύεται προσωρινά σε ένα ιδιωτικό bucket R2, επεξεργάζεται από τον μετασχηματισμό cf.image.segment της Cloudflare που εκτελεί το μοντέλο BiRefNet στα edge GPU της Cloudflare, και το αποκόμμα επιστρέφει ροϊκά. Το προσωρινά αποθηκευμένο αντικείμενο R2 διαγράφεται εντός μίας ώρας από έναν κανόνα κύκλου ζωής R2, ανεξάρτητα από το αποτέλεσμα. Μια τυπική φωτογραφία ολοκληρώνεται σε 1 έως 3 δευτερόλεπτα. Ημερήσια όρια ανά IP και όριο μεταφόρτωσης 5 MB διατηρούν βιώσιμο το δωρεάν επίπεδο.
  • Άλλα εργαλεία με υποστήριξη cloud (μεγέθυνση με ΤΝ, κωδικοποίηση AVIF, PDF πολλών εικόνων) ακολουθούν το ίδιο σχήμα: ένα αίτημα σε ονομαστή υποδομή (ένα cloud image API για υπερ-ανάλυση, το Worker συμπίεσης για κωδικοποίηση AVIF, η υπηρεσία VPS μας για PDF πολλών εικόνων), το αποτέλεσμα επιστρέφει ροϊκά, και μια διαφανής εναλλακτική εντός του browser αν αυτό το αίτημα αποτύχει.
  • Εναλλακτική WebAssembly. Εάν η σχετική διαδρομή cloud δεν είναι προσβάσιμη (το δίκτυό σας πέφτει, βρίσκεστε πίσω από αυστηρό τείχος προστασίας, η ημερήσια ποσόστωση έχει εξαντληθεί ή το αρχείο υπερβαίνει το όριο cloud), το εργαλείο μεταβαίνει διαφανώς σε ένα τοπικό μοντέλο ή κωδικοποιητή που εκτελείται στον browser σας, για παράδειγμα το μοντέλο αφαίρεσης φόντου ISNet μέσω ONNX Runtime Web με WebAssembly. Η πρώτη εκτέλεση κατεβάζει το μοντέλο και είναι πιο αργή, οι επόμενες είναι ταχύτερες. Καμία μεταφόρτωση σε αυτές τις εναλλακτικές διαδρομές, μπορείτε να το επαληθεύσετε στα DevTools.

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

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

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

Επιλέξτε όποια μέθοδο προτιμάτε:

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

  1. Ανοίξτε το RoundCut σε νέα καρτέλα και ανοίξτε τα DevTools → Network.
  2. Χρησιμοποιήστε ένα εργαλείο μόνο στον browser, το Circle Crop ή το ρυθμιστικό προεπισκόπησης Compress. Θα δείτε αιτήματα για HTML/CSS/JS/γραμματοσειρές μόνο, καθώς και τα σχετικά modules WebAssembly κατά την πρώτη χρήση. Κανένα αίτημα δεν θα μεταφέρει τα bytes της εικόνας σας.
  3. Τώρα χρησιμοποιήστε ένα εργαλείο που αγγίζει διακομιστή, Compress → Download ή Remove Background. Θα δείτε ακριβώς ένα POST που μεταφέρει την εικόνα σας, και μία απόκριση που επιστρέφει με το αποτέλεσμα. Τοποθετήστε τον δείκτη πάνω σε οποιοδήποτε αίτημα για να δείτε μέγεθος και χρόνο.

Η στήλη «Initiator» σάς λέει ποιο script ενεργοποίησε κάθε αίτημα, και η στήλη «Type» σάς λέει τι στάλθηκε. Δεν αποκρύπτουμε κανένα από τα δύο.

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

  1. Φορτώστε οποιαδήποτε σελίδα εργαλείου του RoundCut. Χρησιμοποιήστε το Remove Background μία φορά σε μικρή εικόνα, ώστε το μοντέλο ISNet εντός browser να αποθηκευτεί στην cache.
  2. Ανοίξτε τα DevTools → Network → επιλέξτε Offline (ή απενεργοποιήστε το Wi-Fi).
  3. Φορτώστε ξανά τη σελίδα, τα στατικά στοιχεία είναι αποθηκευμένα στην cache, οπότε φορτώνεται κανονικά.
  4. Δοκιμάστε τα εργαλεία:
    • Τα εργαλεία μόνο στον browser (Circle Crop, αλλαγή μεγέθους, η προεπισκόπηση Compress) συνεχίζουν να λειτουργούν, δεν χρειάστηκαν ποτέ δίκτυο.
    • Η λήψη Compress επιστρέφει στο blob προεπισκόπησης εντός browser (ελαφρώς λιγότερο αποδοτική κωδικοποίηση, αλλά λειτουργική).
    • Το Remove Background επιστρέφει στο μοντέλο ISNet WebAssembly και λειτουργεί χωρίς κανένα εξερχόμενο αίτημα.

Εάν τα εργαλεία λειτούργησαν εκτός σύνδεσης (αυτά με υποστήριξη cloud ελαφρώς υποβαθμισμένα, αυτά μόνο στον browser ταυτόσημα), εξ ορισμού κανένας διακομιστής δεν είδε την εικόνα σας.

Τι βλέπουμε εμείς, και τι όχι

Στις διαδρομές client-side, δεν βλέπουμε τίποτα για την εικόνα σας. Δεν υπάρχει αίτημα για εξέταση, δεν υπάρχει cache για αποθήκευση, δεν υπάρχει γραμμή καταγραφής.

Στις διαδρομές server-side:

  • Η υπηρεσία συμπίεσης και PDF βλέπει τα bytes της εικόνας για τη διάρκεια της κωδικοποίησης (συνήθως μερικές εκατοντάδες milliseconds), διατηρεί μια εγγραφή content-addressed cache για το TTL του cache, και αυτό είναι όλο. Το cache δεν ευρετηριάζεται βάσει χρήστη, IP, ονόματος αρχείου ή οποιουδήποτε αναγνωριστικού που θα μπορούσαμε να χρησιμοποιήσουμε για να βρούμε «τις δικές σας» εικόνες. Δεν καταγράφουμε περιεχόμενο εικόνας. Η υπηρεσία κωδικοποίησης είναι κοινόχρηστη μεταξύ των ίδιων δύο tenants που εξυπηρετούσε το v1 πριν την αποκοπή, με ανά tenant CORS, όρια ρυθμού και HMAC-signed canonical URLs.
  • Η Αφαίρεση Φόντου και οι άλλες διαδρομές ΤΝ βλέπουν την εικόνα για τη διάρκεια της προσωρινής μεταφόρτωσης και της κλήσης του μοντέλου (συνήθως μερικά δευτερόλεπτα), μετά την οποία το προσωρινό αντίγραφο διαγράφεται από έναν κανόνα κύκλου ζωής R2. Το μοντέλο BiRefNet εκτελείται εντός της υποδομής της ίδιας της Cloudflare, όχι σε εξωτερικό API τύπου remove.bg / fal.ai / Replicate.

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

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

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

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

Για τους περίεργους:

  • Astro, η γεννήτρια στατικών ιστότοπων. Κάθε σελίδα αποστέλλεται ως απλή HTML με προοδευτικά βελτιωμένα JavaScript «islands» μόνο όπου βρίσκονται τα διαδραστικά εργαλεία.
  • Vanilla CSS με custom properties, χωρίς Tailwind, χωρίς CSS-in-JS. Το πλήρες σύστημα σχεδιασμού είναι ένα μόνο αρχείο tokens.css.
  • canvas.toBlob / <canvas>, κωδικοποίηση JPEG, PNG, WebP, AVIF (υποστηριζόμενη από τον browser) στα εργαλεία μόνο στον browser, και όλη η εργασία περικοπής και αλλαγής μεγέθους.
  • Cropper.js, το layer αλληλεπίδρασης του πλαισίου περικοπής.
  • ONNX Runtime Web, εκτελεί την εναλλακτική ISNet WebAssembly για το Remove Background.
  • Cloudflare Pages, φιλοξενεί το στατικό build, το εξυπηρετεί από το edge.
  • Cloudflare Workers + R2 + cf.image.segment (BiRefNet), η βασική διαδρομή Remove Background.
  • Fastify + sharp 0.34 + libvips 8.17 σε Node 24, η υπηρεσία συμπίεσης και PDF στο api.roundcut.com.br, σε VPS Hostinger στη Γερμανία.
  • Cloudflare Web Analytics, συγκεντρωτική, χωρίς cookies καταμέτρηση προβολών σελίδας.

Υποστήριξη browser

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

Οι μόνες απαραίτητες προϋποθέσεις είναι η JavaScript (για οποιοδήποτε εργαλείο) και σύνδεση δικτύου (μόνο κατά τη χρήση ενός εργαλείου με υποστήριξη cloud στη βασική του διαδρομή, τα εργαλεία μόνο στον browser εκτελούνται πλήρως εκτός σύνδεσης μετά την πρώτη φόρτωση σελίδας).

Ερωτήσεις

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