Περικοπή Εικόνας

Επιλέξτε μια εικόνα και σύρετε ένα πλαίσιο πάνω της για να επιλέξετε την περιοχή που θέλετε να κρατήσετε. Όλα γίνονται μέσα στον browser σας με το Canvas API — η εικόνα δεν ανεβαίνει ποτέ σε server.

Επιλέξτε μια εικόνα

Περικόψτε μια εικόνα χωρίς να την ανεβάσετε πουθενά

Το σύρσιμο πάνω στην εικόνα καταγράφει ένα πλαίσιο επιλογής σε εμφανιζόμενα pixel — το μέγεθος που η εικόνα πραγματικά καταλαμβάνει στην οθόνη σας, το οποίο συνήθως είναι μικρότερο από το πραγματικό της μέγεθος. Πριν κόψει την περικοπή, αυτό το εργαλείο πολλαπλασιάζει την επιλογή σας με την αναλογία των πραγματικών naturalWidth/ naturalHeight της εικόνας προς το εμφανιζόμενο μέγεθός της, και έπειτα σχεδιάζει μόνο εκείνη την κλιμακωμένη περιοχή στο canvas εξόδου με ctx.drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh). Η παράλειψη αυτού του βήματος κλιμάκωσης είναι το πιο συνηθισμένο σφάλμα σε αυτοσχέδια εργαλεία περικοπής — κάνει την περικομμένη εικόνα να καταλήγει στο λάθος σημείο ή με λάθος μέγεθος, επειδή χρησιμοποιεί συντεταγμένες οθόνης πάνω σε πραγματικά δεδομένα pixel.

Παράδειγμα εφαρμογής

Ας πούμε ότι μια φωτογραφία έχει πραγματικό μέγεθος 1200 × 800 px αλλά εμφανίζεται στην οθόνη σας με πλάτος 600 px (άρα ύψος 400 px) — συντελεστής κλίμακας 2× και στις δύο κατευθύνσεις. Σύρετε ένα πλαίσιο από την εμφανιζόμενη θέση (100, 50) έως (300, 200) — μια επιλογή 200×150 στην οθόνη. Πολλαπλασιάζοντας με τον συντελεστή κλίμακας 2× προκύπτει μια πραγματική περιοχή πηγής που ξεκινά από (200, 100) και φτάνει έως (600, 400) — μια περικοπή 400×300 κομμένη από την πραγματική εικόνα πλήρους ανάλυσης, που ταιριάζει ακριβώς με ό,τι είδατε επιλεγμένο στην οθόνη.

Συχνές ερωτήσεις

Η περικοπή ταιριάζει ακριβώς με αυτό που έσυρα στην οθόνη;

Ναι. Οι μεγάλες εικόνες συνήθως εμφανίζονται μικρότερες από το πραγματικό τους μέγεθος σε pixel, οπότε το εργαλείο κλιμακώνει την επιλογή σας στην οθόνη με βάση την αναλογία των πραγματικών (φυσικών) διαστάσεων της εικόνας προς τις εμφανιζόμενες, πριν κόψει την τελική περικοπή. Αν μια φωτογραφία πλάτους 4000px εμφανίζεται στα 800px στην οθόνη σας, η επιλογή σας πολλαπλασιάζεται επί 5× σε κάθε κατεύθυνση — έτσι παίρνετε πάντα τα pixel που πραγματικά είδατε και σύρατε.

Η εικόνα ανεβαίνει κάπου για να περικοπεί;

Όχι. Η περικοπή σχεδιάζεται απευθείας από τη φορτωμένη εικόνα σε ένα <canvas> μέσα στη σελίδα, χρησιμοποιώντας το ίδιο το Canvas API του browser, και το αποτέλεσμα μετατρέπεται σε αρχείο για λήψη με το canvas.toBlob(). Τίποτα δεν στέλνεται σε server σε καμία στιγμή.

Τι κάνουν οι προκαθορισμένες αναλογίες διαστάσεων;

Τετράγωνο, 16:9, 4:3 και 3:2 περιορίζουν το πλαίσιο που σύρετε ώστε να διατηρεί πάντα αυτή την αναλογία, χρήσιμο για φωτογραφίες προφίλ (τετράγωνο), μικρογραφίες βίντεο (16:9), ή τυπικές εκτυπώσεις (4:3, 3:2). Το "Ελεύθερο" αφαιρεί τον περιορισμό ώστε να μπορείτε να σύρετε οποιοδήποτε ορθογώνιο.

Μπορώ να ξανακάνω την επιλογή μου;

Ναι — απλώς σύρετε ένα νέο ορθογώνιο· η προηγούμενη επιλογή και προεπισκόπηση αντικαθίστανται αυτόματα. Τίποτα δεν αποθηκεύεται μέχρι να πατήσετε τον σύνδεσμο λήψης, οπότε μπορείτε να δοκιμάσετε όσες περικοπές θέλετε πριν αποφασίσετε.