Canvas charts is blurry when download as PDF
up vote
7
down vote
favorite
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.
angular pdf canvas html5-canvas jspdf
add a comment |
up vote
7
down vote
favorite
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.
angular pdf canvas html5-canvas jspdf
1
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
1
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 todoc.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. Trydoc.addImage(canvasImage, 'PNG', leftMargin, yPos, canvas.width, canvas.height, "graph")
You will have to create theyPos
– Blindman67
Nov 20 at 19:03
add a comment |
up vote
7
down vote
favorite
up vote
7
down vote
favorite
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.
angular pdf canvas html5-canvas jspdf
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.
angular pdf canvas html5-canvas jspdf
angular pdf canvas html5-canvas jspdf
edited Nov 21 at 18:55
asked Nov 12 at 5:58
Haifeng Zhang
11.4k83575
11.4k83575
1
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
1
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 todoc.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. Trydoc.addImage(canvasImage, 'PNG', leftMargin, yPos, canvas.width, canvas.height, "graph")
You will have to create theyPos
– Blindman67
Nov 20 at 19:03
add a comment |
1
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
1
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 todoc.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. Trydoc.addImage(canvasImage, 'PNG', leftMargin, yPos, canvas.width, canvas.height, "graph")
You will have to create theyPos
– Blindman67
Nov 20 at 19:03
1
1
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
1
1
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 at 19:03
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 at 19:03
add a comment |
3 Answers
3
active
oldest
votes
up vote
2
down vote
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.
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
|
show 1 more comment
up vote
2
down vote
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();
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
add a comment |
up vote
1
down vote
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:
add a comment |
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
2
down vote
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.
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
|
show 1 more comment
up vote
2
down vote
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.
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
|
show 1 more comment
up vote
2
down vote
up vote
2
down vote
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.
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 at 6:19
answered Nov 12 at 6:12
kiranvj
12.2k23350
12.2k23350
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
|
show 1 more comment
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
Thanks for your reply! I have tried it before asking the question but it didn't help...
– Haifeng Zhang
Nov 12 at 6:14
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
@HaifengZhang can you check the updated code.
– kiranvj
Nov 12 at 6:22
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 at 6:39
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 at 6:39
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
Try html2pdf, it uses jsPDF internally. I use that to convert D3 charts to pdf. Its very good github.com/eKoopmans/html2pdf
– kiranvj
Nov 12 at 7:08
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
I have tried your latest update but no chart when saving to PDF.
– Haifeng Zhang
Nov 14 at 22:39
|
show 1 more comment
up vote
2
down vote
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();
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
add a comment |
up vote
2
down vote
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();
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
add a comment |
up vote
2
down vote
up vote
2
down vote
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();
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();
edited Nov 20 at 7:57
answered Nov 20 at 7:01
dean grande
6541012
6541012
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
add a comment |
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
1
1
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
Thank you dean!
– Haifeng Zhang
Nov 21 at 18:50
add a comment |
up vote
1
down vote
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:
add a comment |
up vote
1
down vote
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:
add a comment |
up vote
1
down vote
up vote
1
down vote
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:
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:
answered Nov 21 at 18:50
Haifeng Zhang
11.4k83575
11.4k83575
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53256587%2fcanvas-charts-is-blurry-when-download-as-pdf%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Looks like the image dimensions are changed in second image. Blurry might be bcoz the image is stretched.
– kiranvj
Nov 12 at 6:04
which jspdf version You are using?
– deblocker
Nov 20 at 17:14
1
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. Trydoc.addImage(canvasImage, 'PNG', leftMargin, yPos, canvas.width, canvas.height, "graph")
You will have to create theyPos
– Blindman67
Nov 20 at 19:03