使用jsPDF结合domtoimage生成PDF时出现灰色条纹如何解决

我需要将Angular组件视图生成PDF文件，使用domtoimage将组件渲染为PNG图片，再通过jsPDF将生成的图片添加到PDF中。但生成的PDF中出现了原组件不存在的灰色条纹（文本半隐藏是应用的特效，并非bug），请问如何去除这些条纹？

以下是我的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));
}

• 强制设置渲染背景色与精度：domtoimage对透明区域的渲染容易出现异常，添加bgcolor和quality参数，固定背景为白色并拉满渲染精度：

  domtoimage.toPng(DATA, {
    quality: 1,
    bgcolor: '#ffffff'
  })
  

• 临时移除组件缩放样式：如果组件内使用了transform: scale()等CSS缩放属性，domtoimage渲染时会产生条纹。生成PNG前临时移除缩放，完成后恢复：

  // 保存原缩放样式
  const originalTransform = DATA.style.transform;
  // 临时取消缩放
  DATA.style.transform = 'none';
  
  domtoimage.toPng(DATA)
    .then((png) => {
      // 恢复原样式
      DATA.style.transform = originalTransform;
      // 后续PDF生成逻辑保持不变
    })
  

• 改用Canvas渲染后转PNG：先将组件渲染为Canvas再转成PNG，能提升渲染稳定性，减少条纹问题：

  domtoimage.toCanvas(DATA, { quality: 1 })
    .then((canvas) => {
      const png = canvas.toDataURL('image/png');
      // 后续PDF生成逻辑不变
    })
  

• 调整jsPDF图片添加参数：移除'SLOW'参数，避免压缩算法导致的异常条纹：

  doc.addImage(png, 'png', 10, 10, 190, hpng);
  

内容的提问来源于stack exchange，提问作者Amphyx