Html2canvas: White Spaces From Generated PDF Became Gray

Created on 18 Jul 2019 · 1Comment · Source: niklasvh/html2canvas

Bug reports:

I have upgraded my html2canvas dependency from 1.0.0-rc.1 to 1.0.0-rc.3.

Here's a sample PDF rendered using 1.0.0-rc.1:

Here's a sample PDF rendered using 1.0.0-rc.3:

I didn't change any code but as you can notice the original white background become gray.

Here's a code snippet on how I render the PDF. I render my PDF by section to create a reasonable page break.

        let header = window.document.getElementById("tenant-profile-header");
        let sections = window.document.getElementsByClassName("tenant-profile-section");

        let progressGrowth = (1 / (sections.length + 4)) * 100;

        setTimeout(async () => {
          // Generate header
          let headerHeight = 0;
          await html2canvas(header, options).then(canvas => {
            let img = canvas.toDataURL("image/png", 1.0);
            headerHeight = canvas.height / CONVERTION

            pdf.addImage(img, 'PNG', 0, 0, canvas.width / CONVERTION, headerHeight);
            this.progress += progressGrowth;
          });

          let yOffset = headerHeight + 1;
          let ySpace = A4_HEIGHT_PTS - headerHeight;
          let page = 1;

          // Sections
          let count = sections.length;
          for (let i = 0; i < count; i++) {
            let section = sections[i];
            await html2canvas(section, options).then(canvas => {
              let width = canvas.width / CONVERTION;
              let height = canvas.height / CONVERTION;
              if (ySpace < height) {
                // Add page
                pdf.addPage(595, 842);
                pdf.setPage(++page);
                // Reset
                ySpace = A4_HEIGHT_PTS;
                yOffset = 0;
              }

              let img = canvas.toDataURL("image/png", 1.0);
              pdf.addImage(img, 'PNG', 0, yOffset, width, height)
              this.progress += progressGrowth

              ySpace -= height;
              yOffset += height + 1;
            })
          }