Pertanyaan Menggunakan HTML5 / Canvas / JavaScript untuk mengambil screenshot di browser


"Laporan Bug" Google atau "Alat Masukan" memungkinkan Anda memilih area jendela browser Anda untuk membuat tangkapan layar yang dikirimkan dengan umpan balik Anda tentang bug.

Google Feedback Tool Screenshot Screenshot oleh Jason Small, diposting di duplikat pertanyaan. 

Bagaimana mereka melakukan ini? API umpan balik JavaScript Google dimuat dari sini dan gambaran umum mereka tentang modul umpan balik akan menunjukkan kemampuan screenshot.


794
2018-02-06 06:58


asal


Jawaban:


JavaScript dapat membaca DOM dan merender representasi yang cukup akurat dari penggunaan itu canvas. Saya telah mengerjakan skrip yang mengubah html menjadi gambar kanvas. Memutuskan hari ini untuk membuat penerapannya menjadi mengirim masukan seperti yang Anda jelaskan.

Skrip memungkinkan Anda untuk membuat formulir umpan balik yang menyertakan tangkapan layar, yang dibuat di browser klien, bersama dengan formulirnya. Tangkapan layar didasarkan pada DOM dan karena itu mungkin tidak 100% akurat untuk representasi nyata karena tidak membuat tangkapan layar yang sebenarnya, tetapi membuat tangkapan layar berdasarkan informasi yang tersedia di halaman.

Saya t tidak memerlukan render dari server, karena seluruh gambar dibuat di browser klien. Skrip HTML2Canvas itu sendiri masih dalam keadaan sangat eksperimental, karena tidak mengurai hampir sebanyak atribut CSS3 yang saya inginkan, juga tidak memiliki dukungan untuk memuat gambar CORS bahkan jika proxy tersedia.

Masih kompatibilitas browser yang cukup terbatas (bukan karena lebih tidak bisa didukung, hanya tidak punya waktu untuk membuatnya lebih didukung lintas browser).

Untuk informasi lebih lanjut, lihat contoh di sini:

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

sunting Skrip html2canvas sekarang tersedia secara terpisah sini dan beberapa contoh di sini.

sunting 2 Konfirmasi lain bahwa Google menggunakan metode yang sangat mirip, (sebetulnya berdasarkan dokumentasi, satu-satunya perbedaan utama adalah metode async dari traversing / drawing) dapat ditemukan dalam presentasi ini oleh Elliott Sprehn dari tim Google Umpan Balik: http://www.elliottsprehn.com/preso/fluentconf/


1013
2017-07-13 11:29



Aplikasi web Anda sekarang dapat mengambil screenshot 'asli' dari seluruh desktop klien menggunakan getUserMedia():

Lihatlah contoh ini:

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

Klien harus menggunakan chrome (untuk saat ini) dan perlu mengaktifkan dukungan screen capture di bawah chrome: // flags.


54
2017-10-29 09:33



Sebagai Niklas menyebutkan Kamu dapat memakai html2canvas perpustakaan untuk membuat screenshot menggunakan browser js. Saya akan mengembangkan jawaban dalam hal ini dan memberikan contoh pembuatan tangkapan layar menggunakan pustaka ini (dalam bingkai pertanyaan ini):

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Screen shoter</title>        
    <style>.container { margin-top: 10px; border: solid 1px black; }  </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>
<body>

    <div>Screenshot tester</div>
    <button onclick="report()">Take screenshot</button>

    <div class="container">
        <img width="75%" class="screen" >
    </div>

    <script>
        function report() {
            let region = document.querySelector("body"); // whole screen
            html2canvas(region, {
                onrendered: function (canvas) {
                let pngUrl = canvas.toDataURL();
                let img = document.querySelector(".screen");
                img.src = pngUrl;  // pngUrl contains screenshot graphics data in url form

                // here you can allow user to set bug-region
                // and send it with 'pngUrl' to server


                },
            });
        }
    </script>
</body>
</html>

Disini adalah contoh kerja.

Di report() berfungsi dalam onrendered setelah mendapatkan gambar sebagai data-uri Anda dapat menunjukkannya kepada pengguna dan memungkinkan dia untuk menggambar "wilayah bug" oleh mouse dan kemudian mengirim tangkapan layar dan koordinat wilayah ke server.


1
2017-07-01 19:25