Πώς λειτουργεί η περικοπή εικόνας στο πρόγραμμα περιήγησης
Η διαδικασία περικοπής εκτελείται εξ ολοκλήρου στην καρτέλα του προγράμματος περιήγησής σας. Κανένας διακομιστής, κανένα ανέβασμα, καμία υπηρεσία τρίτων.
- Φορτώστε την εικόνα σε ένα στοιχείο
<img>για τοπική αποκωδικοποίηση. Μια επικάλυψη canvas δείχνει την εικόνα με ένα συρόμενο ορθογώνιο επιλογής. - Σύρετε το ορθογώνιο για να προσαρμόσετε την περιοχή περικοπής. Όταν είναι ενεργή μια σταθερή αναλογία, η αλλαγή μεγέθους διατηρεί αυτόματα την αναλογία.
- Η ένδειξη pixel ενημερώνεται ζωντανά καθώς σύρετε, δείχνοντας τις διαστάσεις περικοπής σε συντεταγμένες pixel.
- Όταν κάνετε κλικ στο Περικοπή & Λήψη, η σελίδα σχεδιάζει την επιλεγμένη περιοχή σε ένα κρυφό canvas και εξάγει μέσω
canvas.toBlob()στην ίδια μορφή.
Γιατί να περικόψετε εικόνες online;
- Η περικοπή αφαιρεί περιττά άκρα, κενό χώρο ή οπτική ακαταστασία.
- Ο έλεγχος αναλογίας είναι απαραίτητος για πλατφόρμες δημοσίευσης.
- Η περικοπή στην πλευρά του πελάτη είναι η μόνη επιλογή σε εταιρικές συσκευές χωρίς επεξεργαστή φωτογραφιών.
- Η ζωντανή ένδειξη διαστάσεων αφαιρεί τις εικασίες.
Συνήθεις εφαρμογές περικοπής
Η περικοπή είναι μια από τις πιο κοινές επεξεργασίες εικόνας.
- Προετοιμασία φωτογραφιών προϊόντων για ηλεκτρονικό κατάστημα. Περικοπή σε 1:1 ή 4:5.
- Περικοπή στιγμιότυπων οθόνης για τεκμηρίωση ή αναφορές σφαλμάτων.
- Πλαισίωση hero εικόνας για landing page.
Παράδειγμα: περικοπή φωτογραφίας 4000×3000 σε 1200×675
Μια φωτογραφία 4000×3000 pixel από ψηφιακή κάμερα είναι πολύ μεγάλη για ένα τυπικό web banner.
Ρίξτε τη φωτογραφία στη ζώνη μεταφόρτωσης. Επιλέξτε την αναλογία 16:9. Σύρετε το σημείο εστίασης. Κάντε κλικ στο Περικοπή & Λήψη.
Ποιες μορφές εικόνας υποστηρίζονται;
Το εργαλείο δέχεται οποιαδήποτε μορφή μπορεί να αποκωδικοποιήσει το πρόγραμμα περιήγησης: PNG, JPEG και WebP. Η έξοδος αποθηκεύεται στην ίδια μορφή με το αρχείο προέλευσης.
Η περικοπή μειώνει το μέγεθος του αρχείου;
Η περικοπή αφαιρεί pixel, οπότε το μέγεθος είναι συνήθως μικρότερο. Η εξαγωγή χρησιμοποιεί την αρχική μορφή και παραμέτρους κωδικοποίησης.
Τι κάνουν οι προεπιλογές αναλογίας διαστάσεων;
Οι προεπιλογές (1:1, 16:9, 4:3, 3:2, 9:16) κλειδώνουν την αναλογία του ορθογωνίου περικοπής.
Η εικόνα ανεβαίνει σε διακομιστή;
Όχι. Η εικόνα δεν φεύγει ποτέ από τη συσκευή σας. Ανοίξτε το DevTools Network panel για επιβεβαίωση.
Μπορώ να περικόψω με ακριβείς συντεταγμένες pixel;
Η τρέχουσα έκδοση χρησιμοποιεί σύρσιμο. Μπορείτε να δείτε συντεταγμένες σε πραγματικό χρόνο. Αριθμητική εισαγωγή δεν είναι διαθέσιμη ακόμα.
Τι συμβαίνει με την αρχική εικόνα;
Το αρχικό αρχείο παραμένει στη συσκευή σας. Η σελίδα το διαβάζει στη μνήμη αλλά δεν το τροποποιεί ποτέ.
Υπάρχει όριο μεγέθους αρχείου;
Το εργαλείο τηρεί όριο 30 MB ανά αρχείο για να ελέγχει τη μνήμη σε συσκευές χαμηλότερων προδιαγραφών.
Λειτουργεί σε κινητά και tablet;
Ναι. Οι λαβές περικοπής είναι σχεδιασμένες για αφή και τα χειριστήρια στοιβάζονται κάθετα.