0

I have an application which has the purpose of converting a webpage to dataURL, and then converting that dataURL to a PDF. The dataURL conversion is being done with html2canvas and the PDF conversion is being done with JSPDF.

Because JSPDF requires JPEG I'm converting the dataURL as a jpeg. This leads to an issue because JPEGs seem to not process transparent backgrounds properly which is leaving me wit ha very ugly black background PDF. I've looked around for solutions to this problem but nothing I've done so far seems to work

In theory I should just be able to set the html2canvas background property to #fff, but this or any other colour have no effect on the output. Can anyone think of any other reason why my my dataURL conversion would still have a black background? Oddly enough it works fine when I access the body element, but when I access the container div that wraps the same portion, this problem comes up

Here is the Jquery function I'm using to perform this action.

$(document).ready(function() {
    $("#testButton").click(function() {
        html2canvas($("#container"), {
            allowTaint: false,
            logging:true,
            background:'#fff',
            onrendered: function(canvas) {
                var data = canvas.toDataURL('image/jpeg',1.0);
                window.open(data);
                var doc = new jsPDF();
                doc.addImage(data,'JPEG',15,40,200,200);
                doc.output('save', 'testingtwo.pdf');
          }});
    });
});

Does anyone know why the background would remain black?

David LaMothe
  • 45
  • 1
  • 8
  • I seemed to have found a compromise by simply setting the background colour prior to conversion, but if anyone does have a reason why the method shown above didn't work I wouldn't mind hearing that either. Doesn't really make a ton of sense to me. – David LaMothe Jun 04 '14 at 22:15

1 Answers1

0

You can set the background on the element itself through css and it should work, i.e:

$("#container").css('background', '#fff')

Note however, there's a new addHTML plugin working as a wrapper between jsPDF and html2canvas which can ease the use of them both together, see https://github.com/MrRio/jsPDF/issues/270

diegocr
  • 1,000
  • 8
  • 13