Html2canvas: 스크린샷을 찍을 때 텍스트 영역에 사용자 줄 바꿈이 없습니다.

그것은 여전히 ​​문제입니다. input 또는 textarea 더 정확하게 텍스트를 배치하는 패치는 없습니다. Range 텍스트를 생성하고 위치를 찾아야 하거나(더 정확한 솔루션) 새 줄을 실제 새 줄로 변환하는 게으른 솔루션이 필요합니다.

이 문제는 https://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717에서 분명합니다.

감사합니다. 게으른 솔루션에는 어떤 것이 수반됩니까? 코드 수정에 대해 자세히 살펴보지 않았으므로 이것이 어리석은 질문이라면 용서해 주십시오. 끝줄 문자 /n/r을 createTextNode()에 전달할 수 있는 유니코드 줄 바꿈 문자로 변환하려고 시도했지만 차이가 없는 것 같습니다.

아마도 각 라인의 위치를 ​​측정하고 그에 따라 렌더링해야 할 것입니다.

여기에서 해결책을 찾았습니다. http://stackoverflow.com/questions/22317823/html2canvas-remove-multiple-spaces-and-line-break
<div contenteditable="true"></div> 를 사용하여 textarea 를 대체합니다.

그러나 나는 angular를 사용하고 ng-model 문제를 찾아야 합니다.

UPD
`div'에서 ng-model 사용에 대한 해결책을 찾았습니다. http://mehrantm.blogspot.com/2013/10/how-make-two-way-binding-to-your.html
누군가를 도울 수 있기를 바랍니다~

아마도 우리는 html2canvas를 사용하기 전에 textarea를 div로 바꿀 수 있을까요? 그 후에 div를 다시 변경하십시오.

이 기능을 사용하여 이 문제를 해결했습니다.

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

html2canvas를 호출하기 전에 함수를 붙여넣으면 문제가 해결됩니다. :)