Περικοπή και αλλαγή μεγέθους εικόνων με αυτό το απλό πρόσθετο jQuery

Δυναμική περικοπή εικόνας είναι ευκολότερο από ποτέ χάρη σε βιβλιοθήκες όπως το jQuery. Το codebase είναι εύκολο στη χρήση και η κοινότητα έχει χιλιάδες plugins για χειρισμού εικόνων.

Ένα τέτοιο plugin είναι Θεριστής, μια ελεύθερη λύση ανοικτής πηγής για την περικοπή εικόνων που χειρίζεται μεγέθυνση, καλλιέργεια, και ακόμα αποθήκευση εικόνων.

Αυτό το έργο είναι διαθέσιμη στο GitHub με μερικούς πολύ μακρά τεκμηρίωση με δεκάδες προσαρμοσμένα χαρακτηριστικά.

Το Cropper σας δίνει (τον προγραμματιστή) πλήρη έλεγχο σε κάθε πτυχή της διασύνδεσης. Μπορείτε να εργαστείτε με 30+ διαφορετικές επιλογές και 20+ προσαρμοσμένες μεθόδους ενσωματωμένο στο plugin Cropper.

Του πλήρως αφής, έτσι λειτουργεί σε όλες τις κινητές συσκευές και υποστηρίζει τον τροχό κύλισης / trackpad για μεγέθυνση & εξάλειψη φωτογραφιών. Οι χρήστες μπορούν αναρρίπτω, γυρίζω, κλίμακα, και επανατοποθετήστε φωτογραφίες οπουδήποτε στον καμβά πριν από την περικοπή.

Η προσθήκη Cropper απαιτεί αντίγραφο του jQuery και αυτό έρχεται με δύο αρχεία: ένα φύλλο στυλ CSS και η βιβλιοθήκη προσθηκών JavaScript. Απλά προσθέστε αυτά τα αρχεία στη σελίδα σας και καλό θα ήταν να πάτε!

Θυμηθείτε, αυτό το εργαλείο έρχεται με πολύ των χαρακτηριστικών. Η ηλεκτρονική τεκμηρίωση μπορεί να σας βοηθήσει, αλλά θα χρειαστεί να βγάλετε τα χέρια σας βρώμικα ρυθμίζοντας ένα πεδίο φόρτωσης εικόνων μόνοι σας να μάθουν όλα. Δείγμα κώδικα τους ακριβώς εξάγει τα πάντα στην κονσόλα και μοιάζει κάτι τέτοιο:

 $ ('image')) () (aspectRatio: 16/9, περικοπή: συνάρτηση (e) // Εξαγωγή δεδομένων αποτελεσμάτων για την περικοπή εικόνας console.log (con). log (e.width), console.log (e.height), console.log (e.rotate), console.log (e.scaleX), console.log (e.scaleY),), 

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

Μπορείς να βρεις ζωντανά δεδομένα εξόδου των συντεταγμένων Χ / Υ, μαζί με διαστάσεις εικόνας κοντά στην κορυφή. Το Cropper περιλαμβάνει επίσης ένα μεταφόρτωσης όπου ο χρήστης μπορεί να επιλέξει μια εικόνα από τον υπολογιστή του και να ξεκινήσει την περικοπή δεξιά στο πρόγραμμα περιήγησης.

Ζωντανές μικρογραφίες ενημέρωση στη γωνία, ώστε να μπορείτε να δείτε ποιο είναι το τελικό αποτέλεσμα πριν από την αποθήκευση. Αλλάξτε το αναλογία απεικόνισης, ο ποιότητα εξόδου, ο προεπιλεγμένη θέση καλλιέργειας, και μια ολόκληρη δέσμη περισσότερο.