Html2canvas: As áreas de texto não têm quebras de linha do usuário quando capturadas

Ainda é um problema, não houve patch para posicionar textos dentro de input s ou textarea s com mais precisão. Seria necessário criar o texto Range s e encontrar suas posições (solução mais precisa) ou apenas uma solução preguiçosa de converter novas linhas em novas linhas reais.

O problema é evidente em https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717

Ok, obrigado - o que implicaria a solução preguiçosa? Não examinei em detalhes como modificar seu código, então me perdoe se esta é uma pergunta estúpida. Eu tentei converter os caracteres da linha final / n / r em caracteres de feed de linha Unicode que podem ser passados ​​para createTextNode (), mas não pareceu fazer nenhuma diferença.

Você provavelmente precisaria medir a posição de cada linha e renderizá-las de acordo.

Encontrei uma solução aqui: http://stackoverflow.com/questions/22317823/html2canvas-remove-multiple-spaces-and-line-break
Ele usa <div contenteditable="true"></div> para substituir textarea .

Mas eu uso angular e devo descobrir o problema de ng-model .

UPD
Encontrei a solução sobre o uso de ng-model em um `div 'aqui: http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html
Espero que possa ajudar alguém ~

talvez possamos apenas substituir textarea por div antes de usar html2canvas? e depois disso mudar o div de volta

Resolvi esse problema usando esta função:

        $('textarea').each(function() {
            if(!$(this).hasClass('d-none')){
                $(this).replaceWith("<div contenteditable=\"true\">"+$(this).html()+"</div>")
            }
        });

Cole a função antes de chamar html2canvas e seu problema será resolvido :)