When using the jsPDF library to convert images from a canvas element to dataURL(), I encountered an issue with PNG images turning into JPEG format for PDF files. The problem is that the transparent background of PNGs becomes black in the converted JPEG image. I am aware that this is due to PNG supporting transparency while JPEG does not.
I know there are workarounds where one can add a background to replace the black area in the JPEG image, but I'm unsure how to implement this. Any suggestions or thoughts on how to tackle this issue?
Here's a snippet of my code:
$(".email_button").click(function(){
// LOOP THROUGH EACH CANVAS SECTION AND STORE THE DATA INTO PDF FORM USING JSPDF CONVERT
var canvas = $(".ifp_container_printing_15 canvas").get();
var imgData = canvas[0].toDataURL('image/jpeg');
console.log(imgData);
var doc = new jsPDF();
doc.addImage(imgData, "JPEG", 60,50);
doc.output('dataurlnewwindow');
});