Η Τεχνική Λειτουργία Προσθήκης Στρογγυλεμένων Γωνιών σε Εικόνες στο Πρόγραμμα Περιήγησης
Όταν χρησιμοποιείτε έναν παραδοσιακό διαδικτυακό επεξεργαστή εικόνων, η τυπική διαδικασία περιλαμβάνει τη μεταφόρτωση του αρχείου σας σε έναν απομακρυσμένο διακομιστή, όπου προγράμματα (συχνά με βιβλιοθήκες όπως το ImageMagick ή το FFmpeg) επεξεργάζονται την εικόνα και σας τη στέλνουν πίσω. Αυτή η μέθοδος είναι αργή, καταναλώνει πόρους και θέτει σε κίνδυνο την ιδιωτικότητά σας. Το εργαλείο μας για στρογγυλεμένες γωνίες αλλάζει εντελώς αυτό το παράδειγμα, αξιοποιώντας την τεράστια ισχύ των σύγχρονων προγραμμάτων περιήγησης για την εκτέλεση όλων των υπολογισμών τοπικά.
Ο πυρήνας της τεχνολογίας μας βασίζεται στο HTML5 Canvas API, το οποίο επιτρέπει δυναμική σχεδίαση 2D σχημάτων και εικόνων bitmap. Όταν σύρετε και αφήνετε μια εικόνα στο εργαλείο μας, χρησιμοποιούμε το εγγενές File API και το URL.createObjectURL() για να φορτώσουμε την εικόνα σας απευθείας στη μνήμη του προγράμματος περιήγησης χωρίς να μεταδοθεί ούτε ένα byte μέσω διαδικτύου. Έτσι υλοποιούμε την υπόσχεσή μας για μηδενική μεταφόρτωση σε διακομιστές.
Μόλις η εικόνα φορτωθεί στη μνήμη, αρχικοποιούμε ένα HTML5 Canvas που αντιστοιχεί στις ακριβείς διαστάσεις του αρχικού σας αρχείου. Για να δημιουργήσουμε τις στρογγυλεμένες γωνίες, η μηχανή JavaScript παράγει ένα σύνθετο μονοπάτι περικοπής. Χρησιμοποιώντας τις μεθόδους arcTo και bezierCurveTo του canvas, ορίζουμε μαθηματικά την ακριβή ακτίνα που επιλέγετε μέσω του ρυθμιστικού. Στη συνέχεια, το πλαίσιο του canvas περικόπτεται σε αυτό το σχήμα και η αρχική εικόνα σχεδιάζεται στο canvas χρησιμοποιώντας τη μέθοδο drawImage. Όλα τα pixel εκτός αυτής της περιοχής απορρίπτονται, δημιουργώντας λείες, καμπύλες άκρες. Τέλος, τα δεδομένα του canvas μετατρέπονται σε αντικείμενο Blob, συνήθως σε μορφή PNG για να διατηρηθεί η διαφάνεια των γωνιών, και είναι έτοιμα για λήψη. Αυτή η διαδικασία ολοκληρώνεται σε χιλιοστά του δευτερολέπτου, 100% ιδιωτικά.