Χρήση HTML5/Canvas/JavaScript για τη λήψη στιγμιότυπων οθόνης εντός του προγράμματος περιήγησης

Το "Report a Bug" ή "Feedback Tool" της Google σας επιτρέπει να επιλέξετε μια περιοχή του παραθύρου του προγράμματος περιήγησής σας για να δημιουργήσετε ένα στιγμιότυπο οθόνης που υποβάλλεται μαζί με τα σχόλιά σας σχετικά με ένα σφάλμα.

Στιγμιότυπο οθόνης από τον Jason Small, που δημοσιεύτηκε σε διπλή ερώτηση. </sub&gt,

Πώς το κάνουν αυτό; Το API ανατροφοδότησης JavaScript της Google'φορτώνεται από εδώ και η επισκόπηση της ενότητας ανατροφοδότησης θα επιδείξει τη δυνατότητα λήψης στιγμιότυπου οθόνης.

joelvh
Επεξεργασμένη ερώτηση Κάνε Σεπτέμβριος 2017 в 9:41
Προγραμματισμός
html5 javascript screenshot canvas
Κάνε Φεβρουάριος 2011 в 6:58
10 προβολές
Λύση

Η JavaScript μπορεί να διαβάσει το DOM και να αποδώσει μια αρκετά ακριβή αναπαράσταση αυτού χρησιμοποιώντας το canvas. Εργάζομαι σε ένα σενάριο που μετατρέπει την HTML σε εικόνα καμβά. Αποφάσισα σήμερα να κάνω μια εφαρμογή του στην αποστολή ανατροφοδότησης όπως περιγράψατε.

Το σενάριο σας επιτρέπει να δημιουργήσετε φόρμες ανατροφοδότησης οι οποίες περιλαμβάνουν ένα στιγμιότυπο οθόνης, που δημιουργείται στο πρόγραμμα περιήγησης του πελάτη, μαζί με τη φόρμα. Το στιγμιότυπο οθόνης βασίζεται στο DOM και ως εκ τούτου μπορεί να μην είναι 100% ακριβές με την πραγματική αναπαράσταση, καθώς δεν κάνει ένα πραγματικό στιγμιότυπο οθόνης, αλλά δημιουργεί το στιγμιότυπο οθόνης με βάση τις πληροφορίες που είναι διαθέσιμες στη σελίδα.

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

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

Για περισσότερες πληροφορίες, ρίξτε μια ματιά στα παραδείγματα εδώ:

http://hertzen.com/experiments/jsfeedback/

edit Το σενάριο html2canvas είναι τώρα διαθέσιμο ξεχωριστά εδώ και μερικά παραδείγματα εδώ.

edit 2 Μια άλλη επιβεβαίωση ότι η Google χρησιμοποιεί μια πολύ παρόμοια μέθοδο (στην πραγματικότητα, με βάση την τεκμηρίωση, η μόνη σημαντική διαφορά είναι η ασύγχρονη μέθοδος διέλευσης/σχεδίασης) μπορεί να βρεθεί σε αυτή την παρουσίαση από τον Elliott Sprehn από την ομάδα Google Feedback: http://www.elliottsprehn.com/preso/fluentconf/

Pang
Επεξεργασμένη απάντηση Κάνε Σεπτέμβριος 2018 в 9:16
Σχόλια (20)

Η εφαρμογή ιστού σας μπορεί τώρα να λάβει ένα 'native' στιγμιότυπο οθόνης ολόκληρης της επιφάνειας εργασίας του πελάτη χρησιμοποιώντας την getUserMedia():

Ρίξτε μια ματιά σε αυτό το παράδειγμα:

https://www.webrtc-experiment.com/Pluginfree-Screen-Sharing/

Ο πελάτης θα πρέπει να χρησιμοποιεί το chrome (προς το παρόν) και θα πρέπει να ενεργοποιήσει την υποστήριξη λήψης οθόνης στο chrome://flags.

Matt Sinclair
Επεξεργασμένη απάντηση Κάνε Μάιος 2016 в 10:09
Σχόλια (8)

Όπως ανέφερε ο [Niklas][1] μπορείτε να χρησιμοποιήσετε τη βιβλιοθήκη [html2canvas][2] για να τραβήξετε ένα στιγμιότυπο οθόνης χρησιμοποιώντας JS στο πρόγραμμα περιήγησης. Θα επεκτείνω την απάντησή του σε αυτό το σημείο παρέχοντας ένα παράδειγμα λήψης στιγμιότυπου οθόνης με τη χρήση αυτής της βιβλιοθήκης:

Kamil Kiełczewski
Επεξεργασμένη απάντηση Κάνε Μάρτιος 2019 в 6:51
Σχόλια (4)