Html2canvas: スクリーンショットを作成したときに、Textareaにユーザーの改行がありません

作成日 2012年03月26日  ·  6コメント  ·  ソース: niklasvh/html2canvas

やあ -

リターンを含むテキストを入力した場合、スクリーンショットにはリターンが含まれていません[キャリッジリターンのある文字列に折りたたまれているように見えます]。 私は数ヶ月前にこのコードを引っ張った[たとえば3]。 それは修正されましたか、それともまだ問題ですか?

Bug

最も参考になるコメント

html2canvasを使用する前にtextareaをdivに置き換えることしかできないのでしょうか?その後、divを元に戻します

全てのコメント6件

これはまだ問題であり、テキストをinputまたはtextarea正確に配置するためのパッチはありません。 テキストRangeを作成してその位置を見つける(より正確な解決策)か、新しい行を実際の新しい行に変換する怠惰な解決策を見つける必要があります。

この問題はhttps://github.com/niklasvh/html2canvas/blob/master/src/Parse.js#L717で明らかです

わかりましたありがとう-怠惰な解決策は何を伴いますか? 私はあなたのコードを修正することについて詳細に調べていませんので、これがばかげた質問であるならば私を許してください。 エンドライン文字/ n / rをcreateTextNode()に渡すことができるユニコード改行文字に変換しようとしましたが、違いは見られませんでした。

おそらく、各線の位置を測定し、それに応じてレンダリングする必要があります。

私はここで解決策を見つけました: http
これは、使用<div contenteditable="true"></div>置き換えるためにtextarea

しかし、私はAngularを使用しており、 ng-model問題を見つける必要があります。

UPD
ここで「div」でng-modelを使用することに関する解決策を見つけました: http
それが誰かを助けることができることを願っています〜

html2canvasを使用する前にtextareaをdivに置き換えることしかできないのでしょうか?その後、divを元に戻します

私はこの関数を使用してこの問題を解決しました:

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

html2canvasを呼び出す前に関数を貼り付けると、問題は解決されます:)

このページは役に立ちましたか?
0 / 5 - 0 評価