Μετατροπέας Εικόνας σε Base64
Μετατρέψτε μια εικόνα σε data URI Base64, ή επικολλήστε ένα για προεπισκόπηση και λήψη. Και οι δύο κατευθύνσεις λειτουργούν εξ ολοκλήρου στο πρόγραμμα περιήγησής σας — τίποτα δεν ανεβαίνει ποτέ.
Base64 byte προς byte, όχι ένα επανακωδικοποιημένο αντίγραφο
Η κωδικοποίηση διαβάζει το αρχείο σας με FileReader.readAsDataURL(file), το οποίο
αναπαριστά τα ακριβή πρωτότυπα bytes του αρχείου ως κείμενο
Base64 — τίποτα δεν αποκωδικοποιείται, επανασυμπιέζεται ή
επανασχεδιάζεται, σε αντίθεση με τη δρομολόγηση της εικόνας μέσω
ενός canvas. Η αποκωδικοποίηση απλώς αντιστρέφει τη διαδικασία:
το κείμενο που επικολλάτε γίνεται απευθείας το src ενός στοιχείου <img>, και το
πρόγραμμα περιήγησης το αποκωδικοποιεί ξανά σε pixel για την
προεπισκόπηση.
Παράδειγμα: γιατί το Base64 είναι περίπου 33% μεγαλύτερο
Το Base64 αντιστοιχίζει κάθε 3 bytes εισόδου σε 4 χαρακτήρες
εξόδου, ο καθένας από 64 πιθανά σύμβολα (A–Z, a–z, 0–9, +, /). Τρία ακατέργαστα bytes, για παράδειγμα [0xF0, 0x9F, 0x98], γίνονται ακριβώς η
συμβολοσειρά 4 χαρακτήρων 8J+Y. Αυτή η σταθερή
αναλογία 3 προς 4 είναι ακριβώς 4/3, οπότε ένα PNG 300 KB γίνεται
περίπου 400 KB κειμένου Base64 — αυτό το εργαλείο υπολογίζει και
εμφανίζει το πραγματικό ποσοστό για το δικό σας αρχείο αντί για
έναν στρογγυλεμένο γενικό κανόνα.
Συχνές ερωτήσεις
Γιατί να χρησιμοποιήσω το FileReader αντί για το canvas, όπως κάνει ο μετατροπέας μορφής;
Επειδή αυτό το εργαλείο πρέπει να διατηρήσει το αρχείο ακριβώς όπως είναι. Η σχεδίαση μιας εικόνας σε canvas την αποκωδικοποιεί σε ακατέργαστα pixel και μετά τα επανακωδικοποιεί — για μια μορφή με απώλειες αυτό είναι πραγματική επανασυμπίεση, και ακόμη και για το PNG μπορεί να αλλάξει τα ακριβή bytes (διαφορετικός κωδικοποιητής, διαφορετικά μεταδεδομένα). Το FileReader.readAsDataURL() αντίθετα διαβάζει απευθείας τα πρωτότυπα bytes του αρχείου και τα αναπαριστά σε Base64, οπότε αυτό που παίρνετε είναι ακριβώς το ίδιο αρχείο, byte προς byte, απλώς επανακωδικοποιημένο ως κείμενο.
Γιατί το κείμενο Base64 είναι μεγαλύτερο από το αρχικό αρχείο;
Το Base64 αναπαριστά κάθε 3 bytes δυαδικών δεδομένων ως 4 χαρακτήρες κειμένου, ο καθένας από ένα αλφάβητο 64 χαρακτήρων — οπότε το κωδικοποιημένο κείμενο είναι πάντα περίπου 4/3 του αρχικού μεγέθους, δηλαδή περίπου 33% περισσότερο. Αυτό το επιπλέον κόστος είναι το τίμημα για την αναπαράσταση αυθαίρετων δυαδικών δεδομένων χρησιμοποιώντας μόνο γράμματα, ψηφία και μερικά σύμβολα, κάτι που το καθιστά ασφαλές να ενσωματωθεί οπουδήποτε αναμένεται απλό κείμενο, όπως ένα background-image CSS ή ένα πεδίο JSON.
Τι συμβαίνει αν επικολλήσω ακατέργαστο Base64 χωρίς το πρόθεμα data:;
Αυτό το εργαλείο εντοπίζει ότι το επικολλημένο κείμενο δεν ξεκινά με data: και προσθέτει αυτόματα data:image/png;base64, πριν προσπαθήσει να το εμφανίσει. Αν η εικόνα είναι στην πραγματικότητα JPEG ή WebP, τα περισσότερα σύγχρονα προγράμματα περιήγησης θα την εμφανίσουν σωστά ούτως ή άλλως, επειδή ελέγχουν την πραγματική υπογραφή του αρχείου στα bytes αντί να εμπιστεύονται τον δηλωμένο τύπο — αλλά για εγγυημένη ακρίβεια, επικολλήστε το πλήρες URI δεδομένων (με τον σωστό τύπο mime) αντί μόνο το τμήμα Base64.
Γιατί βλέπω 'όχι έγκυρη εικόνα' αντί για ένα σπασμένο εικονίδιο εικόνας;
Ο ορισμός μη έγκυρων δεδομένων ως src ενός στοιχείου <img> κανονικά σας αφήνει να κοιτάζετε ένα σπασμένο εικονίδιο εικόνας χωρίς καμία εξήγηση. Αυτό το εργαλείο παρακολουθεί το ίδιο το συμβάν onerror της εικόνας και το αντικαθιστά με ένα σαφές, φιλικό μήνυμα — έτσι μια κατεστραμμένη συμβολοσειρά, μια ημιτελής επικόλληση ή απλό κείμενο που επικολλήθηκε κατά λάθος λαμβάνουν όλα μια απλή εξήγηση αντί για αδιέξοδο.
Αποστέλλεται σε διακομιστή οτιδήποτε επικολλώ ή ανεβάζω εδώ;
Όχι. Η κωδικοποίηση χρησιμοποιεί το FileReader εξ ολοκλήρου μέσα στο πρόγραμμα περιήγησής σας, και η αποκωδικοποίηση ορίζει το src ενός στοιχείου <img> απευθείας στο κείμενο που πληκτρολογήσατε — κανένα από τα δύο βήματα δεν αγγίζει ποτέ ένα αίτημα δικτύου. Αυτό ισχύει για κάθε εργαλείο σε αυτόν τον ιστότοπο.