Grey stripes when generating PDF with image using jsPDF

Issue

I have to generate a PDF file with a view of my Angular component. I use domtoimage to render component as a PNG image and jsPDF to add generated image to PDF.

But in rendered PDF I noticed some gray stripes (the half of the text was hidden because it's a special effect in my application, it's not a bug):

They didn't exist in my original component that had been screenshoted.

How to remove this stripes?

Here's my code for generating PDF:

openPDF(): void {
    this.generatingPDF = true;
    const DATA = this.textContainerRef.nativeElement!;

    domtoimage
      .toPng(DATA)
      .then((png) => {
        const w = DATA.clientWidth;
        const h = DATA.clientHeight;
        const hpng = (h / w) * 190;
        const doc = new jsPDF('p', 'mm', 'a4');
        try {
          let name = 'untitled_text';
          if (this.text?.title) {
            name = this.text.title;
          }
          doc.addImage(png, 'png', 10, 10, 190, hpng, 'SLOW').save(name);
          this.generatingPDF = false;
          this._cdr.markForCheck();
        } catch (e) {
          this.generatingPDF = false;
          this._cdr.markForCheck();
        }
      })
      .catch((err) => console.log(err));
  }

Solution

Pass an bgcolor option to toPng function. This will replace gray color with color you passed:

domtoimage.toPng(DATA, { bgcolor: '#fff' })

And you will get this result:

Answered By - Amphyx