parameter - Utilizzando HTML5/Canvas/JavaScript per prendere screenshot nel browser




screenshot browser javascript (2)

Come menzionato da Niklas , puoi usare la libreria html2canvas per creare uno screenshot usando il browser js. Svilupperò una risposta in questo punto e fornirò un example di creazione di schermate usando questa libreria (in questa cornice di domanda):

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


    },
  });
}
.container {
  margin-top: 10px;
  border: solid 1px black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div>Screenshot tester</div>
<button onclick="report()">Take screenshot</button>

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

Nella funzione report() in onrendered dopo aver ottenuto l'immagine come data-uri, è possibile mostrarlo all'utente e consentirgli di disegnare "regione bug" con il mouse e quindi inviare le schermate e le coordinate della regione al server.

Google "Segnala un bug" o "Strumento di feedback" ti consente di selezionare un'area della finestra del browser per creare uno screenshot che viene inviato con il tuo feedback su un bug.

Screenshot di Jason Small, pubblicato in una domanda doppia .

Come stanno facendo questo? L'API di feedback JavaScript di Google viene caricata da here e la loro panoramica del modulo di feedback dimostrerà la capacità di screenshot.


La tua app Web ora può acquisire uno screenshot "nativo" dell'intero desktop del client utilizzando getUserMedia() :

Dai un'occhiata a questo esempio:

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

Il client dovrà utilizzare Chrome (per ora) e dovrà abilitare il supporto per la cattura dello schermo sotto chrome: // flags.







screenshot