Textarea screenshot mit Html2Canvas

Question

Ich benutze html2canvas Bibliothek, um Screenshots zu machen. Das ist meine example.

Wenn Sie auf die Schaltfläche to image klicken, wird ein Bildschirmfoto des Textbereichs erstellt.

Momentan ignoriert es den Scrollertext und nimmt nur den Screenshot, der auf dem Textarea sichtbar ist. Ich möchte den Screenshot des gesamten Textbereiches erstellen.

window.takeScreenShot = function() { 
    html2canvas(document.getElementById("target"), { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
    }, 
    width: 320, 
    height: 220 
    }); 
} 

Kann mir jemand helfen, dieses Problem zu lösen? Hilfe würde wirklich geschätzt werden.

Dank

Answer 1

Bevor Sie den Screenshot, stellen Sie den Textbereich Höhe alles aufzunehmen. Dann setzen Sie die Höhe nach (demo):

window.takeScreenShot = function() { 
    var textarea = document.getElementById("target"); 
    textarea.style.height = textarea.scrollHeight + "px"; 
    html2canvas(textarea, { 
    onrendered: function(canvas) { 
     document.body.appendChild(canvas); 
     textarea.style.height = ""; 
    }, 
    width: 320, 
    height: textarea.offsetHeight 
    }); 
}