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 übergebenendataURL
ist eine einfachebase64
string ohne MIME-type. Ist das beabsichtigt? - Ich habe gerade die
upload()
Funktion - ich verstehe nicht, was diedataURL
- Funktion funktioniert (noch); ich habe es, wie es war in dem Beispiel verwendet, um zu konvertieren einecanvas
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 diecanvas
Objekt, aber diehtml2canvas()
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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Habe ich geändert und kommentierte das Verfahren von diese Antwort. Es sendet nur eine Datei mit einem bestimmten Namen, aus einer
<canvas>
element.multipart/form-data
- Siehemultipart/form-data
an w3.org (scrollen Sie nach unten für ein Beispiel).Dieser code funktioniert für mich. Es generiert screenshot von html2canvas, laden Sie die screenshot imgur-api, und die imgur url.