Αλλαγή μεγέθους εικόνων _

Πώς λειτουργεί η αλλαγή μεγέθους στο πρόγραμμα περιήγησης

Κάθε αλλαγή μεγέθους είναι μια σύντομη διαδικασία σε JavaScript. Το Canvas API αποκωδικοποιεί και ανασχεδιάζει.

1. Διαβάστε κάθε αρχείο ως Blob και δημιουργήστε URL αντικειμένου.
2. Υπολογίστε τις διαστάσεις-στόχους από την επιλεγμένη λειτουργία.
3. Δημιουργήστε Canvas στο μέγεθος-στόχο και καλέστε ctx.drawImage().
4. Καλέστε canvas.toBlob για επανακωδικοποίηση και προσφέρετε λήψη.

Γιατί να αλλάξετε μέγεθος εικόνων;

• Οι υπερμεγέθεις εικόνες είναι η πιο κοινή αιτία αργών σελίδων.
• Οι φόρμες μεταφόρτωσης επιβάλλουν αυστηρές διαστάσεις.
• Το email και τα chat επανασυμπιέζουν οτιδήποτε μεγάλο.
• Η συνέπεια παρτίδας είναι σημαντική για γκαλερί και καταλόγους.

Συνήθεις εφαρμογές

Η αλλαγή μεγέθους είναι απαραίτητη όταν οι διαστάσεις προέλευσης δεν ταιριάζουν.

• Προετοιμασία φωτογραφιών για Shopify ή WooCommerce.
• Δημιουργία κοινωνικών και app assets από ένα master αρχείο.
• Σμίκρυνση στιγμιότυπων QA πριν από την επισύναψη σε ticket.

Παράδειγμα: φωτογραφία 4000 px σε 1600 px

Μια φωτογραφία 4000×3000 είναι πολύ μεγάλη.

Ρίξτε τη φωτογραφία, ορίστε τη μεγαλύτερη πλευρά σε 1600. Κάντε λήψη.

Ποιες λειτουργίες αλλαγής μεγέθους είναι διαθέσιμες;

Τρεις: Περιορισμός μεγαλύτερης πλευράς, Ακριβείς διαστάσεις και Κλίμακα κατά ποσοστό.

Αυτό γίνεται στη συσκευή μου;

Ναι, πλήρως. Κανένα δεδομένο δεν αποστέλλεται σε διακομιστή.

Η αλλαγή μεγέθους μειώνει την ποιότητα;

Η σμίκρυνση είναι εξαιρετική — ο browser υπολογίζει τον μέσο όρο των pixel. Η μεγέθυνση δεν μπορεί να δημιουργήσει λεπτομέρεια που δεν υπήρχε.

Ποιες μορφές υποστηρίζονται;

Είσοδος: PNG, JPEG, WebP, GIF, BMP. Η έξοδος διατηρεί την αρχική μορφή.

Ρίξτε τις εικόνες σας, επιλέξτε μέγεθος, αλλάξτε μέγεθος.