Wie lade einen screenshot mit html2canvas?

Mit html2canvas wie kann ich einen Screenshot, um ein Objekt? Ich habe die Erkundung der demos, und sehen, dass die Funktion zum generieren der screenshot wird wie folgt generiert:

$(window).ready(function() {
  ('body').html2canvas();       
});

Was ich versucht habe zu tun ist

$(window).ready(function() {
  canvasRecord = $('body').html2canvas(); 
  dataURL = canvasRecord.toDataURL("image/png");
  dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  upload(dataURL);

});

Und ich dann übergeben Sie es an meiner upload() Funktion. Das problem, das ich habe, ist ich kann nicht herausfinden, wo der screenshot gemacht wird, ist in der html2canvas() Bibliothek oder die Funktion gibt es. Ich habe versucht, die Umwandlung der canvas-Objekt mit diese Antwort von SO (obwohl ich nicht sicher bin, ich brauche, um dies zu tun).


Fragte ich eben ein Frage auf, wie Sie eine Datei hochladen,imgur, und die Antworten (insbesondere @bebraw s) die mir helfen zu verstehen, was ich tun muss.

Den upload() Funktion von Imgur Beispiel-api-Hilfe:

function upload(file) {
   //file is from a <input> tag or from Drag'n Drop
   //Is the file an image?
   if (!file || !file.type.match(/image.*/)) return;

   //It is!
   //Let's build a FormData object
   var fd = new FormData();
   fd.append("image", file); //Append the file
   fd.append("key", "mykey"); //Get your own key: http://api.imgur.com/

   //Create the XHR (Cross-Domain XHR FTW!!!)
   var xhr = new XMLHttpRequest();
   xhr.open("POST", "http://api.imgur.com/2/upload.json"); //Boooom!
   xhr.onload = function() {
      //Big win!
      //The URL of the image is:
      JSON.parse(xhr.responseText).upload.links.imgur_page;
   }

   //Ok, I don't handle the errors. An exercice for the reader.
   //And now, we send the formdata
   xhr.send(fd);
}
  • Was ist die Funktion upload? Die übergebenen dataURL ist eine einfache base64 string ohne MIME-type. Ist das beabsichtigt?
  • Ich habe gerade die upload() Funktion - ich verstehe nicht, was die dataURL - Funktion funktioniert (noch); ich habe es, wie es war in dem Beispiel verwendet, um zu konvertieren eine canvas auf ein Bild (soweit ich das beurteilen konnte).
  • Die richtige Methode ist var canvasRecord = new html2canvas(document.body).canvas; Kombinieren Sie das Ergebnis mit diese Antwort.
  • Danke @RobW - das ist bestimmt wieder ein canvas. Ich bin noch ein bisschen verwirrt aber; wie beziehe ich mich auf die Frage, mit der Sie verknüpft ist, zu dieser Leinwand? Ich dachte, ich muss einfach konvertieren Sie die Leinwand, um ein Bild.
  • Verstehen Sie die Grenze format? Wenn ja, können Sie ganz einfach key=mykey zu Ihrer Einreichung, und dann bist du fertig. Ansonsten, so geben Sie ein Schrei, und ich werde helfen weiter.
  • ein Aspekt der html2canvas ist immer noch verwirrend mich. Gibt es eine Möglichkeit zu verhindern, dass die Bibliothek aus der überlagerung der screenshot der aktuellen browser-Fenster? Trotz durchlesen der Bibliothek, die ich noch nicht ganz verstanden wie es funktioniert.
  • Was meinst du mit überlagert? Für zukünftige Leser: Hier ist die Quellcode von html2canvas.
  • Wenn ich var canvasRecord = new html2canvas(document.body).canvas;, canvasRecord speichert die canvas Objekt, aber die html2canvas() Funktion auch Orte, die das Objekt am oberen Rand der Webseite.
  • Haben Sie einen Blick auf die Spitze des Quellcode. Sollten Sie tatsächlich nutzen, neue html2canvas(document.Körper, {ready:function(canvasRecord){/* etwas Tun.*/}}). (By default, the bereit` - Methode fügt den canvas-Bereich, um das Dokument).
  • Ah ich sehe. Nochmals vielen Dank für die Erklärung.

InformationsquelleAutor djq | 2012-02-12
Schreibe einen Kommentar