Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Textareas don't have user line breaks when screenshotted #83

Closed
marywilliamson opened this issue Mar 26, 2012 · 6 comments
Closed

Textareas don't have user line breaks when screenshotted #83

marywilliamson opened this issue Mar 26, 2012 · 6 comments
Labels

Comments

@marywilliamson
Copy link

marywilliamson commented Mar 26, 2012

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
Copy link
Owner

niklasvh commented Mar 26, 2012

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
Copy link
Author

marywilliamson commented Mar 26, 2012

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
Copy link
Owner

niklasvh commented Mar 27, 2012

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

@savokiss
Copy link

savokiss commented Nov 13, 2015

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
Copy link

zhangshichun commented Jun 13, 2019

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

@rafaelpereira97
Copy link

rafaelpereira97 commented Jul 31, 2020

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 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

5 participants