chart.exportImg() is throwing blurry image

[sachin717]

i am trying to export the full org chart in expanded mode, i have tried with 50 records its working fine, now as things are getting complexed and with 250 records its printing blurry images is there any way to achieve the clear pdf for the records

[bumbeishvili]

Image quality varies on the screen PPI , it looks good on retina macbook screens for example, but not so good on non-retina macbook screens.

That's because converting happens directly on the frontend.

There is a way to increase scale (default is 3), but be aware that it's performance heavy operation and it might work for poor screens, but fail on retina screens , because retina needs to do at least 4X times more operations

So, I'd suggest having some kind of conditional scaling set depending on the screen, remember default is 3

[sachin717]

is am using the pdf option sent by dufault just need the highest image quality can you guide me

[bumbeishvili]

Adding scale:5 in place of green line should do the trick

[grzegorzCieslik95]

Hi, i have the same problem with my export. I have changed the scale to 6 but I still have blur and a big file (150MB)!

Do you have any tip how can I export smaller file?

[bumbeishvili]

@grzegorzCieslik95 scale controls how bit the file is. scale:1 exports exactly the same size as on the screen, scale 6 - makes it 36x bigger image.

Can you post a 3x scale photo of the exported org chart?

[grzegorzCieslik95]

Sure, i post scale 3 and 6

[bumbeishvili]

I can see the quality difference.

The issue with blurriness is that you are trying to export a horizontally spread chart on a vertical screen :/

Not sure how to approach this - I think I have to apply some kind of cropping to make it look better. I will keep this issue open, not sure when it will be fixed

[grzegorzCieslik95]

Hi, I have sth like this https://stackblitz.com/edit/js-7qzbix?file=index.html . I'm still having problem with rendering images but it works very well in big organisation.

Of course this is the pdf export, but on pdf zoom works different than on HTML -> this is why I changed some part of export

[grzegorzCieslik95]

Hello, i paste here my code for export pdf without blur for ~300 nodes

      const { svg } = chart.current.getChartState();
      const graphNode = svg.node();
      if (!graphNode) {
        return null;
      }
      const nodeWithInlineStyles = computeToInlineStyles(graphNode); // replace style to inline style
      await transformImagesToBase64(nodeWithInlineStyles); // replace image URL to base64
      const { y: oY, x: oX } = graphNode.getBoundingClientRect();
      const { height, width, x, y } =
        graphNode.children[0].getBoundingClientRect();
      const opt = {
        margin: [4, 8],
        filename: fileName,
        image: { type: 'jpeg', quality: 0.98 },
        html2canvas: {
          useCORS: true,
          allowTaint: true,
          letterRendering: true,
          scale: getCorrectScale(
            graphNode.getElementsByClassName(nodeClassName).length, // get correct scale for nodes count
          ), 
          height,
          width,
          x: x - oX,
          y: y - oY,
        },
        jsPDF: {
          unit: 'px',
          format: [height + 12, width + 16],
          orientation: height > width ? 'p' : 'l',
        },
      };
      return html2pdf()
        .set(opt)
        .from(nodeWithInlineStyles)
        .save()

computeToInlineStyles -> return new copied node

if you want, I can create pr for this but this is only pdf export

[dbdaniellozynski]

Hi,

I tried several variations, for A0 format the scale factor 4.6 is the highest I can choose (or nothing actually happens) now the file is quit large (130MB) but still blurry...Any idea why? Thank you!

  function downloadPdf(chart) {
    chart.exportImg({
      save: false,
      full: true,
      scale: 4.6,
      onLoad: (base64) => {
        var pdf = new jspdf.jsPDF('landscape','mm','a0');
        var img = new Image();
        img.src = base64;
        img.onload = function () {
          var widthInInches = img.width;
          var heightInInches = img.height;

          var aspectRatio = img.height / img.width;

          var pdfWidth = '1189';
          var pdfHeight = pdfWidth * aspectRatio;

          pdf.addImage(
            img,
            'JPEG',
            0,
            0,
            pdfWidth,
            pdfHeight
          );
          pdf.save('chart.pdf');
        };
      },
    });
  }
</script>

[grzegorzCieslik95]

dbdaniellozynski Did you tried my method to generate pdf? I dont use native export from library.

[dbdaniellozynski]

@grzegorzCieslik95 Hi, I am not really a JS guy, I simply don't unterstand what to do with your code :-(

[grzegorzCieslik95]

Oki, so i dont know how to help you with this. I had the same problem with this library native export

[dbdaniellozynski]

Ok, I tried to understand your code and came up with this (absolutely no idea if that should work that way, but at least it creates an very blurry PDF ;-)

Is that sort of the way you intended to use the code? Do you know why it's blurry?

` Githubissues.

Githubissues is a development platform for aggregating issues.