html2canvas icon indicating copy to clipboard operation
html2canvas copied to clipboard

Improve text performance by combining words in the same line

Open KurtGokhan opened this issue 3 years ago • 1 comments

Summary

Normally, html2canvas splits the text into words before rendering for word wrapping to work correctly. However this causes too many calls to ctx.fillText as each word is rendered separately.

This PR combines multiple words in each line so that only one fillText call is done for each line.

Note that this does not change anything if letter-spacing is not 0. Because each letter (grapheme) should be rendered separately in that case.

Explain the motivation for making this change. What existing problem does the pull request solve?

The performance cost itself is normally not a big deal. But I made this fix specifically for this issue in jsPDF: https://github.com/parallax/jsPDF/issues/3137

jsPDF uses a different canvas implementation and each call to fillText increases the performance cost. This PR can reduce the number of render calls about 10 times.

Test plan (required)

Demonstrate how the issue/feature can be replicated. For most cases, simply adding an appropriate html/css template into the reftests should be sufficient. Please see other tests there for reference.

This should not change any functionality or how the text is rendered. It just increases the text rendering performance. The effect of rendering performance to an image may be unnoticable. But it will be noticable for users of jsPDF.

Code formatting

Please make sure that code adheres to the project code formatting. Running npm run format will automatically format your code correctly.

Done.

KurtGokhan avatar Oct 01 '21 13:10 KurtGokhan

+1 to this. The selection of text in the resulted pdf becomes almost unusable because of this

Laggii avatar Oct 08 '21 11:10 Laggii