Screenshot von <body> mit html2canvas und store-img-JS var

Ich bin versucht, Benutzer auf meiner Seite einen Knopf drücken, um einen screenshot des aktuellen Bildschirms ( alles im Körper).

Aus meiner Forschung, html2canvas scheint zu sein, eine Ressource, die dies möglich macht.

Mein Problem ist in der Dokumentation keine Beispiel-code, und ich bin kämpfen, um einen Griff auf die Schritte.

http://html2canvas.hertzen.com/documentation.html

Folgende Frage ALSO ( Wie lade einen screenshot mit html2canvas? ) lässt mich ein wenig verwirrt. Ich möchte nur wissen, wie man ein Bild an dieser Stelle.

Aus seinem code.

$(window).ready(function(){
    ('body').html2canvas();
    var canvasRecord = new html2canvas(document.body).canvas;

     //At this point does the .toDataURL method return a png?
});

In diesem Punkt bin ich verloren, wo das Bild ist, oder auch wie/Wann zu erstellen. Krank sorgen, indem Sie server zu einem späteren Zeitpunkt.

Jede information dankbar. Danke! (html2canvas auch gebraucht?)

InformationsquelleAutor mattyd | 2012-05-01
  1. 4

    Als Sie die html2canvas jQuery-plugin, hier ist ein Beispiel-snippet

    var screenshot;

$('body').html2canvas({
  onrendered: function(canvas) {
    screenshot = canvas.toDataURL();

    //code to process/send the image to server
  }
});

    Im obigen code-snippet, das die html2canvas erstellt den screenshot der Seite.

    Können Sie auch PhantomJS zu erstellen screenshots von Webseiten - vorausgesetzt, dass Sie zu öffentlich zugänglichen Seiten, vielleicht, weil Sie keinen Zugang zu login-geschützten Seiten auf der server-Seite; in solchen Situationen nur eine client-seitige Lösung wie html2canvas arbeiten.

    • können Sie ausführen, phantomjs auf der clientseitigen?
    • phantomjs ist nicht eine javascript-Bibliothek, es ist ein webkit-browser, ohne den Benutzer Schnittstelle. So können Sie nicht führen Sie es auf der clientseitigen. Sie kann sich mithilfe von Diensten wie usersnap.com um screenshots von Ihrer website/app.
    InformationsquelleAutor Livingston Samuel
  2. 1
    $("#screenshot").click(function() {
  $("body").html2canvas({
    onrendered: function( canvas ) {
      $(".filt_opt_n").html(canvas);
      //window.open(img);
    }
  });
});
<div id="screenshot"></div>

    .filt_opt_n dies ist ein div, die u wollen, um die Ausgabe-das ist für mich arbeiten

    InformationsquelleAutor Francis Stalin
  3. 0

    Kann eine alte Frage. Sie könnten versuchen, diese!

    var htmlCanvas = new html2canvas(document.body);
var queue = htmlCanvas.parse();
var canvas = htmlCanvas.render(queue, { elements: { length: 1} });
var img = canvas.toDataURL();
    InformationsquelleAutor Antony Joseph
Schreibe einen Kommentar