Αλλαγή Μεγέθους Εικόνας
Επιλέξτε μια εικόνα και αλλάξτε το μέγεθός της σε ακριβές πλάτος και ύψος ή με ποσοστό. Η εικόνα επεξεργάζεται εξ ολοκλήρου μέσα στον browser σας με το Canvas API — δεν ανεβαίνει ποτέ σε server.
Αλλάξτε το μέγεθος μιας εικόνας χωρίς να την ανεβάσετε πουθενά
Αυτό το εργαλείο φορτώνει την εικόνα σας σε ένα <img>, διαβάζει τις πραγματικές διαστάσεις της
σε pixel από τα naturalWidth/
naturalHeight, και έπειτα τη σχεδιάζει σε ένα <canvas> με το πλάτος και ύψος που επιλέγετε
χρησιμοποιώντας ctx.drawImage(img, 0, 0, νέοΠλ, νέοΥψ). Το canvas
αναλαμβάνει την επαναδειγματοληψία, και το canvas.toBlob() μετατρέπει το αποτέλεσμα σε αρχείο
για λήψη — κάθε βήμα εκτελείται μέσα στην καρτέλα του browser
σας, οπότε μια προσωπική φωτογραφία δεν χρειάζεται ποτέ να φύγει
από τη συσκευή σας μόνο για να αλλάξει μέγεθος.
Παράδειγμα εφαρμογής
Ας πούμε ότι η αρχική σας φωτογραφία είναι 1200 × 800 px. Πληκτρολογήστε 50 στο πεδίο ποσοστού και τα δύο πεδία ενημερώνονται αμέσως σε 600 × 400 px — ακριβώς στο μισό προς κάθε κατεύθυνση, αφού η κλιμάκωση με ποσοστό εφαρμόζει τον ίδιο συντελεστή και στις δύο διαστάσεις. Προτιμάτε ακριβές μέγεθος; Δεν χρειάζεται τίποτα άλλο — με ενεργό το "Κλείδωμα αναλογίας διαστάσεων", πληκτρολογώντας μόνο 600 στο πεδίο πλάτους υπολογίζεται αυτόματα ύψος 400 (600 × 800/1200 = 400), οπότε η εικόνα με το νέο μέγεθος διατηρεί τις αρχικές της αναλογίες χωρίς χειροκίνητους υπολογισμούς.
Συχνές ερωτήσεις
Η εικόνα ανεβαίνει κάπου σε server;
Όχι. Το αρχείο διαβάζεται τοπικά με το FileReader API του browser, σχεδιάζεται σε ένα στοιχείο <canvas> μέσα στη σελίδα, και η εικόνα με το νέο μέγεθος παράγεται με το canvas.toBlob() — όλα αυτά γίνονται στη δική σας συσκευή. Τίποτα δεν στέλνεται σε server, οπότε δεν υπάρχει βήμα μεταφόρτωσης, αναμονή, ή ανησυχία για προσωπικές φωτογραφίες.
Γιατί το πλάτος και το ύψος αλλάζουν μαζί;
Όταν είναι επιλεγμένο το "Κλείδωμα αναλογίας διαστάσεων", η αλλαγή της μίας διάστασης υπολογίζει ξανά την άλλη με βάση την αναλογία της αρχικής εικόνας, ώστε το αποτέλεσμα να μην βγαίνει ποτέ παραμορφωμένο. Αποεπιλέξτε το αν θέλετε σκόπιμα διαφορετική αναλογία — για παράδειγμα για να φτιάξετε τετράγωνη μικρογραφία από μια πανοραμική φωτογραφία.
Ποια είναι η διαφορά ανάμεσα σε ακριβή pixel και στο πεδίο ποσοστού;
Και τα δύο οδηγούν την ίδια αλλαγή μεγέθους, απλώς από διαφορετικό σημείο εκκίνησης. Τα ακριβή pixel σάς επιτρέπουν να στοχεύσετε ένα συγκεκριμένο μέγεθος, όπως 800×600 για τη φωτογραφία μιας αγγελίας. Το πεδίο ποσοστού κλιμακώνει και τις δύο διαστάσεις με τον ίδιο συντελεστή σε ένα βήμα — το 50% υποδιπλασιάζει αμέσως πλάτος και ύψος — κάτι πιο γρήγορο όταν δεν σας ενδιαφέρει ο ακριβής τελικός αριθμός pixel.
Η αλλαγή μεγέθους μειώνει την ποιότητα της εικόνας;
Η σμίκρυνση μιας εικόνας (downscaling) συνήθως δείχνει καλά — ο μηχανισμός απόδοσης canvas του browser εξομαλύνει τα pixel κατά την επαναδειγματοληψία. Η μεγέθυνση μιας εικόνας (upscaling) δεν μπορεί να επινοήσει λεπτομέρεια που δεν υπήρχε, οπότε πολύ μικρές αρχικές φωτογραφίες θα δείχνουν πιο θολές όταν μεγεθύνονται. Για καλύτερα αποτελέσματα, ξεκινήστε πάντα από τη μεγαλύτερη διαθέσιμη εκδοχή που έχετε.