Targeting eines spezifischen div mit html2canvas

Question

ich Hertzen des html2canvas.js verwendet und versucht, den Beispielcode so einzustellen, dass es eine spezifische div anstelle des gesamten Körpers eines Dokuments zielt:

html2canvas(document.body, { 
    onrendered: function(canvas) { 
    document.body.appendChild(canvas); 
    } 
}); 

Eine Probe von dem, was ich versuche zu erreichen, ist hier: https://jsfiddle.net/ununkg3a/

Durch Klicken auf die Schaltfläche "PNG speichern" möchte ich ein Bild der jQuery generierten Quadrate anfügen, die ich in einem bestimmten div anvisiere. Im Code sieht es so aus, als würde es etwas anhängen, aber es hat keine Höhe. Wenn ich versuche, eine Höhe mit der Ausgabe zu setzen, funktioniert es immer noch nicht wie erwartet.

Ist es nicht möglich, so etwas zu erreichen? Immer wenn ich document.body zu einem anderen Element ändere, wird der Screenshot nicht mehr gerendert, obwohl er beim Zurückwechseln in document.body wiedergegeben wird. Jemand sagte mir, dass ich das Bild mit js zuschneiden müsste, aber das scheint ein bisschen hacky zu sein.

Answer 1

Es kann: es ist das erste Attribut. (fiddle)

Beispiel:

html2canvas(document.getElementById('test')).then(function(canvas) { 
    document.body.appendChild(canvas); 
}); 

---

In Ihrem Beispiel canvas2html kann nicht die Höhe des div erfahren. Deshalb fällt es auf 0px Höhe zurück, so dass Sie nichts sehen werden.

Geben Sie dem #art Breite, dann können Sie die Höhe manuell zählen und verwenden.

Mathematisch Beispiel:
art_square_width = 10px
art_square_height = 10px
art_square_amount = 500
art_width = 250 Pixel
art_height = art_width/(art_width/art_square_width) * art_square_height = 200 Pixel

(fiddle)