javascript - JsPDF addImage jpeg background is black - Stack Overflow

admin管理员组

文章数量:1399161

I use JsPDF library and I have a problem, when I use addImage format 'JPEG' my background is black. Why this format? Because when I use format "PNG" - size file PDF after saving 12 charts = 100 MB ++ . I see all question and does not find the exact answer to it. My functions looks like that:

<canvas id = 'myCanvas'></canvas>

var doc = new jsPDF('p','pt', 'a2');
var canvas = document.querySelector('#myCanvas');
var canvasImg = canvas.toDataURL('image/JPEG');
doc.addImage(canvasImg,'JPEG', 70,700,1000,300 ); //left, from above, width, height
doc.addHTML($(id_page),function(){
  doc.save('test.pdf');
});

This is default template, but i tried add more style including "setFillColor" - uselessly! Tried add white canvas with "destination-over", nice idea but... realization, today 2018 year, may be who find working solution, I really hope at least for some working information. Many thanks.

I use JsPDF library and I have a problem, when I use addImage format 'JPEG' my background is black. Why this format? Because when I use format "PNG" - size file PDF after saving 12 charts = 100 MB ++ . I see all question and does not find the exact answer to it. My functions looks like that:

<canvas id = 'myCanvas'></canvas>

var doc = new jsPDF('p','pt', 'a2');
var canvas = document.querySelector('#myCanvas');
var canvasImg = canvas.toDataURL('image/JPEG');
doc.addImage(canvasImg,'JPEG', 70,700,1000,300 ); //left, from above, width, height
doc.addHTML($(id_page),function(){
  doc.save('test.pdf');
});

This is default template, but i tried add more style including "setFillColor" - uselessly! Tried add white canvas with "destination-over", nice idea but... realization, today 2018 year, may be who find working solution, I really hope at least for some working information. Many thanks.

• javascript
• canvas
• png
• jpeg
• jspdf

Share Improve this question Follow asked Jul 27, 2018 at 5:41 Паша ХарченкоПаша Харченко 10111 gold badge22 silver badges88 bronze badges 5

• I use Chart.js may be will help – Паша Харченко Commented Jul 27, 2018 at 5:44
• 1 Use PNG instead. JPEG is not transparent but PNG is – Ullas Hunka Commented Jul 27, 2018 at 5:44
• @UllasHunka see above)) " I use addImage format 'JPEG' my background is black. Why this format? Because when I use format "PNG" - size file PDF after saving 12 charts = 100 MB ++" – Паша Харченко Commented Jul 27, 2018 at 5:48
• That's the truth. JPEGs are for photographs and realistic images. PNGs are for line art, text-heavy images, and images with few colors. But you can't seem getaway if you want good quality. – Ullas Hunka Commented Jul 27, 2018 at 5:51
• @UllasHunka quality it's not problem, user's have very weak puters, and save file 100mb+ bad idea(( – Паша Харченко Commented Jul 27, 2018 at 6:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

PNGs support alpha channels (transparency) while JPEGs do not.

A workaround would be to fill the canvas with any background color you prefer before exporting.

After the canvas is created and before you call Chart.js to draw the charts, create a context and fill the entire canvas with whatever colors you prefer.

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);

本文标签： javascriptJsPDF addImage jpeg background is blackStack Overflow