Canvas charts is blurry when download as PDF

Question

2nd Update:

Thanks again for everyone who commented/answered my question

Problem solved: I am not able to make canvas image looks better on the generated PDF and the due date of the project is closing, finally, I decided to move the "PDF Report" feature from Front-End(Angular) to Back-End(python), I have posted an answer(not really an answer for my own question, but more like a solution)

Update after a couple of days search:

I have replaced Chart.js with Echarts but the blurry issue still exists. I did a lot of search on jsPDF and Canvas blurry online, it seems like the canvas settings need to be customized, unfortunately, I have no clue how to achieve it.

How looks in broswer:

When download as PDF:

Original Question:

I have an Angular project which is required to download PDF for graph data. I choose Chart.js and jspdf which works well. When I print 2 charts in one page, the resolution is okay but when I try to print 3 charts on the same page, the texts are blurry. I have read this similar question but not figured out how to make resolution better when having multiple charts.

HTML Code:

  <div class="col-md-4">
    <div class="card card-chart">
      <div class="card-header">
        <h5 class="card-title">Cervical Lateral Flexion</h5>
        <!--<p class="card-category">Line Chart</p>-->
      </div>
      <div class="card-body">
        <canvas id="cervicalLateralFlexion"></canvas>
      </div>
    </div>
  </div>

Typescript Code:

  public static buildChart(doc, selector, title, yHeight) {
    let height = yHeight;
    const canvas = document.querySelector(selector) as HTMLCanvasElement;
    doc.setFontSize(h5);
    doc.text(leftMargin, yHeight, title);
    const canvasImage = canvas.toDataURL('image/png');
    height += margin;
    doc.addImage(canvasImage, 'PNG', leftMargin, height);
  }

Can anyone help? How to solve this issue? Thanks in advance! Image 1 is how it looks on web page and image 2 is PDF file.

Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched. — kiranvj, Nov 12 '18 at 06:04
The problem is bilinear filtering on the PDF copy of the image due to its size settings do not match the image pixel size. Your call to `doc.addImage` looks like the wrong arguments. `doc.addImage(img, format, xPos, yPos, width, height, alias)` Ensure that the canvas resolution matches the display size in the PDF doc. Try `doc.addImage(canvasImage, 'PNG', leftMargin, yPos, canvas.width, canvas.height, "graph")` You will have to create the `yPos` — Blindman67, Nov 20 '18 at 19:03

kiranvj · Answer 1 · 2018-11-12T06:19:43.247

2

You need to set the height and width in addImage

doc.addImage(canvasImage, 'PNG', leftMargin, height, "IMAGE-WIDTH-HERE", "IMAGE-HEIGHT-HERE");

If you don't know the image dimensions try something like this.

function getImageDimensions(file) {
  return new Promise (function (resolved, rejected) {
    var i = new Image()
    i.onload = function(){
      resolved({w: i.width, h: i.height})
    };
    i.src = file
  })
}

public static buildChart(doc, selector, title, yHeight) {
    let height = yHeight;
    const canvas = document.querySelector(selector) as HTMLCanvasElement;
    doc.setFontSize(h5);
    doc.text(leftMargin, yHeight, title);

    const canvasImage = canvas.toDataURL('image/png, 1.0');

    let dimensions = await getImageDimensions(canvasImage);

    height += margin;
    doc.addImage(canvasImage, 'PNG', leftMargin, height, dimensions.w, dimensions.h);
  }

getImageDimensions function copied from here, this function uses Promises since we need synchronous behavior in your scenario.

edited Nov 12 '18 at 06:19

answered Nov 12 '18 at 06:12

kiranvj

32,342
7
71
76

Thanks for your reply! I have tried it before asking the question but it didn't help... – Haifeng Zhang Nov 12 '18 at 06:14
I searched online, it seems like it's Chart.js issue. i will replace it with Echarts tomorrow and see whether it helps. Thanks again – Haifeng Zhang Nov 12 '18 at 06:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good https://github.com/eKoopmans/html2pdf – kiranvj Nov 12 '18 at 07:08
I have tried your latest update but no chart when saving to PDF. – Haifeng Zhang Nov 14 '18 at 22:39
Can you plz share the code. I have used it with react, not with angular, but that should not be a prob. html2pdf pulls contents from DOM – kiranvj Nov 15 '18 at 04:30

dean grande · Answer 2 · 2018-11-20T07:57:51.900

This is a workaround, not a direct solution to the jsPDF issues described. I was faced with the exact same issue: jsPDF, blurriness for charts and angular.

Hopefully, I'm not straying too far off topic but I thought this would be valuable for some.

The workaround: node + puppeteer

puppeteer is a headless chrome browser that works under any environment (even linux terminal) and can render a web page into an image or PDF.

    import * as puppeteer from "puppeteer";

    const browser = await puppeteer.launch({});
    const page = await browser.newPage();

    await page.goto("https://google.com", { waitUntil: 'networkidle2' });
    await page.setViewport({ width: 1250, height: 3950 });
    await page.screenshot({ path: 'hourly_report.png' });
    await browser.close();

Haifeng Zhang · Accepted Answer · 2020-05-11T14:32:04.777

Update on May 10th, 2020 I have recorded a couple of videos on how to build PDF report using Weasyprint and Plotly, you can find details here: https://www.youtube.com/watch?v=hjWTCYPy7oU&t=1s

Update on Feb 3rd, 2020:

I have found that Plotly is really amazing when export static images, highly recommended. See images I have built and you can compare it with my original question post images: A couple of features:

Images can be saved as SVG or PNG. No worry about the blurry issue anymore!
it is easy to customize the theme/style
You can add any shape on the graph, see the blue vertical line, you can draw triangle, rectangle(see the filled gray area) and any other shapes you want to.
It supports multiple languages: JS, Python, and R.

Original Post in 2019:

Thanks all for whom answered my question, I really appreciate your help I spent more than 2 weeks on jsPDF + Chart.js but still not figuring out how to print PDF with canvas images properly.

This project is new, the languages/tools/dependencies are not restricted. To make the project done on time I switch the PDF report from Front-End(Angular) to Back-End(Python). Now it took me 2 days to complete the PDF.

sources I used to generate PDF report and Charts:

Weasyprint https://weasyprint.org/
Pygal http://pygal.org/en/stable/

Many thanks to Weasyprint for making generating PDF documents with HTML and CSS productive! Here's the PDF I have been generated:

score 0 · Answer 4 · answered Oct 19 '21 at 10:29

If you are using puppeteer for taking the screenshot in image or pdf format then you need to scale the image using deviceScaleFactor option, by default it is set to 1. Its min value is 1 and the max is 5. By setting it, both the image as well as pdf would be scaled up in quality. Check out this issue for more details on this. Attaching the code below:

const page = await browser.newPage();
await page.setViewport({ width: 800, height: 800, deviceScaleFactor: 3 });

P.S. Setting width and height to viewport wouldn't have any effect on the size of image/pdf.

Canvas charts is blurry when download as PDF

2nd Update:

Update after a couple of days search:

Original Question:

4 Answers4