Html2canvas: Textareas don't have user line breaks when screenshotted

[marywilliamson]

Hi -

If I put in text with returns in it, the screenshot doesn't contain the returns [just looks collapsed in a string with the carriage returns]. I lasted pulled this code a few [say 3] mos ago. Has that been fixed or is it still an issue?

[niklasvh]

It is still an issue, there has been no patch to position texts within inputs or textareas more accurately. Would either need to create text Ranges and find their positions (more accurate solution) or just a lazy solution of converting new lines into actual new lines.

The issue is evident on https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717

[marywilliamson]

Ok thanks - what would the lazy solution entail? I haven't looked in detail into modifying your code so forgive me if this is a stupid question. I tried converting the endline characters /n/r into unicode line feed characters which can be passed into createTextNode() but it didn't seem to make any difference.

[niklasvh]

You would probably need to measure the position for each line and render them accordingly.

[savokiss]

I‘ve found a solution here: http://stackoverflow.com/questions/22317823/html2canvas-remove-multiple-spaces-and-line-break
It use <div contenteditable="true"></div> to replace textarea.

But I use angular and I must find out the ng-model issue.

UPD
I found the solution about using ng-model on a `div' here: http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html
Hope it can help someone~

[zhangshichun]

maybe we can only replace textarea to div before use html2canvas?and after that changge the div back

[rafaelpereira97]

I solved this problem by using this function:

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

Paste the function before call html2canvas and your problem will by solved :)