Html2canvas: Текстовые области не имеют разрывов строк при создании снимков экрана

Это все еще проблема, не было патча для более точного позиционирования текстов в input s или textarea s. Потребуется либо создать текст Range s и найти их позиции (более точное решение), либо просто ленивое решение для преобразования новых строк в настоящие новые строки.

Проблема очевидна на https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717.

Хорошо, спасибо - что повлечет за собой ленивое решение? Я не рассматривал подробно изменение вашего кода, так что простите меня, если это глупый вопрос. Я попытался преобразовать символы конечной строки / n / r в символы перевода строки Unicode, которые можно передать в createTextNode (), но, похоже, это не имело никакого значения.

Вероятно, вам нужно будет измерить позицию для каждой линии и соответствующим образом отобразить их.

Я нашел здесь решение: http://stackoverflow.com/questions/22317823/html2canvas-remove-multiple-spaces-and-line-break
Он использует <div contenteditable="true"></div> для замены textarea .

Но я использую angular, и я должен выяснить проблему ng-model .

UPD
Я нашел решение об использовании ng-model в div здесь: http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html
Надеюсь, это поможет кому-то ~

возможно, мы можем заменить только textarea на div перед использованием html2canvas? и после этого изменить div обратно

Я решил эту проблему с помощью этой функции:

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

Вставьте функцию перед вызовом html2canvas, и ваша проблема будет решена :)