CODEWITHSUNDEEP
javascriptcanvaspngjpegjspdf
Паша Харченко
Паша Харченко

Reputation: 101

JsPDF addImage jpeg background is black

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.

Upvotes: 5

Views: 8012

Answers (1)

Umang Raghuvanshi
Umang Raghuvanshi

Reputation: 1258

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);

Upvotes: 5

Related Questions