Issue using doc.output() - jsPDF

Question

I am having an issue with using jsPDF. When using doc.output('datauri'); to open a new PDF in another window, nothing happens.

Heres what I am doing:

       $(".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();
            var doc = new jsPDF();

            doc.setFontSize(40);
            doc.text(35, 25, "Paranyan loves jsPDF");
            doc.addImage(imgData, 'png', 15, 40, 180, 160);
            doc.output('dataurlnewwindow');     //opens the data uri in new window
        });

Heres my sources:

<script type="text/javascript" src="/printing/jsPDF-master/jspdf.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/libs/png_support/zlib.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/libs/png_support/png.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/jspdf.plugin.addimage.js"></script>
<script type="text/javascript" src="/printing/jsPDF-master/jspdf.plugin.png_support.js"></script>

I am getting no errors and the image converted works completely fine and I am able to output that image data url. Its only when using the output that nothing happens. Suggestions, thoughts?

UPDATE:

Here is what I am doing now:

        $(".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 ctx=canvas[0].getContext("2d");
            ctx.fillRect(20,20,150,100);
            ctx.fillStyle = 'white'; // or whatever color
            ctx.fillRect(0, 0, canvas[0].height, canvas[0].width);

            var imgData = canvas[0].toDataURL('image/jpeg');
            console.log(imgData);
            var doc = new jsPDF();
            doc.addImage(imgData, "jpeg", 60,50);           
            doc.output('dataurlnewwindow');
        });

This works fine but I only get a white background with no image showing. Suggestions?

Solved:

Along with following the answer below, if you need to fill the background of a layer(canvas) using KinecticJS I used the following:

var box = new Kinetic.Rect({
            width: floorObj.width,
            height: floorObj.height,
            fill: 'white',
            draggable: false,
            name: 'background'
});

What happened here is. My image is a PNG so by default it has a transparent background but that does not work well with transferring over to jsPDF So I just created a simple layer which used the same image dimensions to create a white background. So on rendering of PDF it worked perfectly.

Answer 1

Looks like you're pulling out the data from your canvas element wrong. Looks like it should be more like this:

Where ever your canvas is originally drawn...do this before drawing your PNG.

canvas.fillStyle = 'white'; // or whatever color
canvas.fillRect(0, 0, canvas.height, canvas.width);

Then this again.

$(".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').slice('data:image/jpeg;base64,'.length);
    // Convert the data to binary form
    imgData = atob(imgData);

    var doc = new jsPDF();

    doc.setFontSize(40);
    doc.text(35, 25, "Paranyan loves jsPDF");
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);
    doc.output('datauri');
});

I got this mainly from their example.

Answer 2

Try using this instead of your last line.

window.open(doc.output('bloburl'), '_blank');

I also had a problem with adblock blocking my new window.

Answer 3

source :

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>

<script type="text/javascript">
    function savePDF() {
        var imgData;
        html2canvas($("#someHtml"), {
            useCORS: true,
            onrendered: function (canvas) {
                imgData = canvas.toDataURL(
                   'image/png');
                var doc = new jsPDF('p', 'pt', 'a4');
                doc.addImage(imgData, 'PNG', 10, 10);
                doc.save('sample-file.pdf');
                window.open(imgData);
            }
        });
    }
</script>

<div id="someHtml" class="maindiv">
    //HTML code with images(cdn)
</div>