When using Angular Material Field, Label is not getting exported in screenshot (Canvas/Image)

[subodhgodbole]

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

• You are using the latest version
• You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I am trying to use this library with my Angular project. However I see that generated canvas / image does not contain Angular Material Field's Label value. The generated image contains Prefix, Postfix, Hint, but not the Label, in both cases when appearance is "fill" or "outline".

Here is running example using Stackblitz - https://stackblitz.com/edit/angular-html-2-canvas

Two issues with labels -
When there is value in field, label is missing in canvas / image

When there is no value in the field, label is getting truncated, also it gets overlapped with placeholder if it exists

When developing with Angular, it's very common to use Label, so label not getting into canvas / image is a major problem.

Specifications:

• html2canvas version tested with: 1.4.1 - This is latest at the time of reporting this issue
• Browser & version: Chrome 121.0.6167.86 (Official Build) (64-bit) - This is latest at the time of reporting this issue
• Operating system: Windows 11