Skip to content

Bug in html2canvas - rotated text fields. #3277

@tperry2x-uk

Description

@tperry2x-uk

If we have a rotated field, and we export a rectangle of that canvas to an image (thereby invoking html2canvas), we can see there's a cropping of the rotated text.
see issue:
#184
And issue:
#1559
(bugs in html2canvas library)

The problem is that the ClipEffect is being calculated based on the bounds that were measured WITHOUT the transform.
When overflow is not visible, it creates a ClipEffect using the borderBox/paddingBox calculated from this.curves, which are based on this.container.bounds - the bounds that were measured with transform: none.

(lines 6141 and 6162)

Before:

javascript
if (this.container.styles.overflowX !== 0 /* VISIBLE */) {

After:

javascript
if (this.container.styles.overflowX !== 0 /* VISIBLE */ && this.container.styles.transform === null) {

Change 2 - Line 6162

Before:

javascript
if (parent.container.styles.overflowX !== 0 /* VISIBLE */) {

After:

javascript
if (parent.container.styles.overflowX !== 0 /* VISIBLE */ && parent.container.styles.transform === null) {

Prevents ClipEffect creation for elements with CSS transforms, eliminating text clipping in rotated elements.

Sorry if I've not submitted this in the correct way. I don't understand github.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions