Εάν θέλετε να τραβήξετε ένα στιγμιότυπο οθόνης μέρους ή ολόκληρης της ιστοσελίδας σας χρησιμοποιώντας JavaScript, μπορεί να κολλήσετε. Η δημιουργία μιας εικόνας από ένα στοιχείο HTML μπορεί να φαίνεται σαν πρόκληση, καθώς δεν υπάρχει άμεσος τρόπος να το κάνετε στο JavaScript.

Ευτυχώς, αυτό δεν είναι ένα αδύνατο έργο και, στην πραγματικότητα, είναι αρκετά εύκολο με τα κατάλληλα εργαλεία. Χρησιμοποιώντας τη βιβλιοθήκη html-to-image, η δημιουργία εικόνων κόμβων DOM είναι τόσο απλή όσο μια κλήση μεμονωμένης συνάρτησης.

Πώς λειτουργεί το html-to-image;

ο html σε εικόνα Η βιβλιοθήκη παράγει μια εικόνα με τη μορφή διεύθυνσης URL δεδομένων base64. Υποστηρίζει πολλές μορφές εξόδου, συμπεριλαμβανομένων των PNG, JPG και SVG. Για την εκτέλεση αυτής της μετατροπής, η βιβλιοθήκη χρησιμοποιεί αυτόν τον αλγόριθμο:

  1. Δημιουργήστε έναν κλώνο του στοιχείου HTML στόχου, των παιδιών του και τυχόν συνημμένων ψευδοστοιχείων.
  2. Αντιγράψτε το στυλ για όλα τα κλωνοποιημένα στοιχεία και ενσωματώστε το styling inline.
    3. instagram viewer
  3. Ενσωματώστε τις σχετικές γραμματοσειρές ιστού, εάν υπάρχουν.
  4. Ενσωματώστε τυχόν εικόνες που υπάρχουν.
  5. Μετατρέψτε τον κλωνοποιημένο κόμβο σε XML και μετά σε SVG.
  6. Χρησιμοποιήστε το SVG για να δημιουργήσετε μια διεύθυνση URL δεδομένων.

Προειδοποιήσεις και Περιορισμοί

Παρόλο που το html-to-image είναι μια εξαιρετική βιβλιοθήκη, δεν είναι τέλεια. Έχει μερικές επιφυλάξεις, και συγκεκριμένα:

  • Η βιβλιοθήκη δεν θα λειτουργεί στον Internet Explorer ή στο Safari.
  • Εάν το HTML που προσπαθείτε να μετατρέψετε περιλαμβάνει ένα μολυσμένο στοιχείο καμβά, η βιβλιοθήκη θα αποτύχει. Οπως και MDN εξηγεί ότι η συμπερίληψη δεδομένων που δεν είναι εγκεκριμένα από την CORS στο στοιχείο καμβά σας θα το αλλοιώσει.
  • Επειδή τα προγράμματα περιήγησης θέτουν όρια στο μέγιστο μέγεθος μιας διεύθυνσης URL δεδομένων, υπάρχουν όρια στο μέγεθος του HTML που μπορεί να μετατρέψει η βιβλιοθήκη.

Χρήση της Βιβλιοθήκης

Για να δοκιμάσετε τη βιβλιοθήκη, το πρώτο πράγμα που πρέπει να κάνετε είναι να δημιουργήσετε έναν κατάλογο έργου στον τοπικό σας υπολογιστή. Στη συνέχεια, εγκαταστήστε το html-to-image σε αυτόν τον κατάλογο χρησιμοποιώντας ο διαχειριστής πακέτων npm. Ακολουθεί η εντολή τερματικού για να το εγκαταστήσετε:

npm εγκαθιστώ--αποθήκευση html σε εικόνα

Θα πρέπει επίσης να εγκαταστήσετε ένα πακέτο JavaScript, για να διευκολύνετε τη χρήση της βιβλιοθήκης. ο esbuild Το bundler μπορεί να βοηθήσει στη συσκευασία των λειτουργικών μονάδων κόμβου σε σενάρια συμβατά με τον ιστό.

npm εγκαθιστώ esbuild

Αυτό είναι το μόνο που χρειάζεστε για να εγκαταστήσετε. Στη συνέχεια, δημιουργήστε ένα αρχείο που ονομάζεται index.html στον κατάλογό σας και εξυπηρετήστε τον με έναν διακομιστή web της επιλογής σας. Βάλτε τον παρακάτω κώδικα στο index.html:

<!doctype html>
<html lang="en">
<κεφάλι>
<meta charset="UTF-8">
<μετα όνομα="θέαση"
 περιεχόμενο="πλάτος=πλάτος συσκευής, κλιμακούμενη από χρήστη=όχι, αρχική κλίμακα=1,0, μέγιστη κλίμακα=1,0, ελάχιστη κλίμακα=1,0">
<meta http-equiv="X-UA-Συμβατό" περιεχόμενο="δηλ.=άκρη">
<τίτλος>Εγγραφο</title>
<στυλ>
 .colorful-div {
 γέμιση: 3εκ.
 άσπρο χρώμα;
 φόντο-εικόνα: γραμμική κλίση (προς τα δεξιά, κίτρινο, ρεμπέκα μωβ).
 περίγραμμα: 1px συμπαγές μαύρο.
 περιθώριο: 1 rem auto;
 μέγεθος γραμματοσειράς: 3rem;
 γραμματοσειρά-οικογένεια: cursive;
 }
</style>
</head>
<σώμα>
<div class="πολύχρωμο-διβ">
 Εγώ'θα είμαι σε ένα στιγμιότυπο οθόνης!
</div>
<div class="μακροσκελές κείμενο">
 Εγώ'm ένα παράδειγμα μιας αρκετά περιεκτικής παραγράφου που
 δείχνει ότι η λήψη στιγμιότυπων οθόνης σε JavaScript είναι
 πραγματικά πολύ εύκολο, για τους εξής λόγους:
<ul>
<li>Λόγος 1</li>
<li>Λόγος 2</li>
<li>Λόγος 2</li>
</ul>
</div>
<σενάριο src="έξω.js"></script>
</body>
</html>

Αυτός ο κώδικας δημιουργεί δύο στοιχεία στη σελίδα: ένα div με φόντο ντεγκραντέ, και λίγο κείμενο και μια μη ταξινομημένη λίστα μέσα σε ένα άλλο div. Στη συνέχεια, θα γράψετε το JavaScript για να μετατρέψετε αυτά τα στοιχεία σε εικόνες. Τοποθετήστε τον ακόλουθο κώδικα σε ένα νέο αρχείο που ονομάζεται script.js:

εισαγωγή * όπως και htmlToImage από "html-to-image";
const elems = ['.πολύχρωμος-διβ', '.μεγάλο κείμενο']


στοιχειά.για κάθε((elem, ind) => {
συνθ κόμβος = έγγραφο.querySelector (elem)
htmlToImage.toPng(κόμβος)
 .έπειτα(λειτουργία (dataUrl) {
αφήνω img = νέος Εικόνα();
 img.src = dataUrl;
έγγραφο.σώμα.appendChild(img);
 })
 .σύλληψη(λειτουργία(λάθος){
 console.error('Ωχ! Κάτι πήγε στραβά!');
κονσόλα.log (σφάλμα)
 });
})

Αυτός ο κώδικας κάνει μερικά πράγματα:

  • Εισάγει τη βιβλιοθήκη html σε εικόνα.
  • Δημιουργεί έναν πίνακα από επιλογείς CSS που στοχεύει τα δύο στοιχεία.
  • Δημιουργεί μια εικόνα PNG με τη μορφή URL δεδομένων από κάθε στοιχείο του πίνακα.
  • Δημιουργεί μια ετικέτα img και ορίζει το χαρακτηριστικό src στη διεύθυνση URL δεδομένων, δημιουργώντας αντίγραφα εικόνας των δύο στοιχείων.

Τώρα χρησιμοποιήστε το esbuild για να δημιουργήσετε το πακέτο (έξω.js) που αναφέρεται στο index.html εκτελώντας τα ακόλουθα στο τερματικό σας:

 ./node_modules/.bin/esbuild script.js --bundle --outfile=out.js

Σε αυτό το σημείο, ακολουθεί η εμφάνιση του index.html στο πρόγραμμα περιήγησής σας:

Παρόλο που τα αντίγραφα φαίνονται ακριβώς ίδια με τα πρωτότυπα, στην πραγματικότητα είναι στοιχεία εικόνας. Μπορείτε να το επιβεβαιώσετε με ανοίγοντας τα εργαλεία προγραμματιστή και την επιθεώρησή τους.

Αυτή η βιβλιοθήκη λειτουργεί επίσης με πλαίσια JavaScript. ο Τεκμηρίωση html σε εικόνα περιέχει οδηγίες για τον τρόπο δημιουργίας άλλων μορφών εικόνας. Περιλαμβάνει επίσης ένα παράδειγμα που δείχνει πώς να χρησιμοποιήσετε τη βιβλιοθήκη με το React.

Η λήψη στιγμιότυπων οθόνης με JavaScript είναι εύκολη

Δεν υπάρχει εγγενής μέθοδος JavaScript για τη δημιουργία εικόνων από στοιχεία HTML ή τη λήψη στιγμιότυπων οθόνης του DOM. Ωστόσο, με τη βοήθεια βιβλιοθηκών και υπηρεσιών όπως το html-to-image, γίνεται εύκολη υπόθεση.

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