Jspdf: Is it possible to generate PDF with multiple images

[sajesh1985]

Hi,

I am using Jqplot to generate charts and i using JSPDF to generate PDF.Her is what i m doing..
var doc = new jsPDF();

        $("div .jqplot-target").children().each(function(){            
        if($(this)[0].nodeName.toLowerCase() == "canvas")
        {
            var i=0;

            var data = canvasToImage($(this),"#ffffff");
            var jpegBinary = atob(data);
            doc.addImage(jpegBinary, 'JPEG', 10 + i , 10 + i , 50 + i, 50 + i); 
            i=i+50;               
        }
        });

        doc.output('datauri');

function canvasToImage(canvas,backgroundColor)
{

            //cache height and width 
            var w = canvas[0].width; 
            var h = canvas[0].height;                
            var cname= canvas[0].className;
            $("." + cname).attr('width',w).attr('height',h); 
            var newCanvas = $("." + cname)[0]; 
            var newContext = newCanvas.getContext("2d"); 

            newContext.clearRect(0,0,w,h); 
            var allData = newContext.getImageData(0, 0, w, h); 

            $(canvas).each(function(){ 
                var context = $(this)[0].getContext("2d"); 
                var imageData = context.getImageData(0, 0, w, h); 

                var pixels = 4 * w * h; 
                while (pixels--) { 
                    allData.data[pixels] = allData.data[pixels] + 
                    imageData.data[pixels]; 
                } 
            }); 

            newContext.putImageData(allData, 0,0); 

            newContext.globalCompositeOperation = "destination-over"; 
            newContext.fillStyle = backgroundColor; 
            newContext.fillRect(0,0,w,h); 

           //get the image data from the canvas 
           var imageData = newCanvas.toDataURL("image/jpeg").slice('data:image/jpeg;base64,'.length);; 
           //return the Base64 encoded data url string 
           return imageData; 
        }

but i am not able to see the images i m just seeing a blank pdf with 1 rectangle.

[dvdotsenko]

@sajesh1985

Without looking too close into the code, I am guessing the issue here is the format of image data you extract or push into jsPDF.

Take a close look at

https://github.com/MrRio/jsPDF/blob/master/examples/js/basic.js#L211

and

https://github.com/MrRio/jsPDF/blob/master/test/pdf_generate_tests.js#L331

Between these two examples you should spot what's different in your code.

[MrRio]

Try converting your images to Data URIs, see http://jspdf.com/ for an example.

[EKerrigan]

Not exactly, but what you can do is combine all the images in canvas, then get the DataURI from the canvas, and use that as your one image.

var imgData;
var canvas;
var sources = {
    base_image: 'assets/pdf-images/background.jpg',
    cloud_Image: 'assets/pdf-images/CLOUD.jpg',
    database_Image:'assets/pdf-images/database.jpg'
};

function loadImages(sources, callback) {
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    // get num of sources
    for(var src in sources) {
        numImages++;
    }
    for(var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if(++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = sources[src];
    }
}

function savePDF(){

    //load all the images first, then combine them in the callback
    loadImages(sources, function(images) {
        //create a canvas
        canvas = document.createElement('canvas');
        document.body.appendChild(canvas);
        canvas.width = 1100;
        canvas.height =1700;

       //add the images
        base_image = new Image();
        base_image.src = 'assets/pdf-images/background.jpg';
        context = canvas.getContext('2d');
        context.drawImage(images.base_image,0,0, 1100, 1700);
        context.drawImage(images.cloud_Image, 100, 30, 200, 137);
        context.drawImage(images.database_Image, 350, 55, 93, 104);

        //now grab the one image data for jspdf
        imgData = canvas.toDataURL('image/jpeg');

        //and lose the canvas when you're done
        document.body.removeChild(canvas);

    });

    var doc = new jsPDF();
    doc.addImage(imgData, 'JPEG', 0, 0,209, 297);
    doc.save('test2.pdf');
}

[hamamoto]

@EKerrigan thanks so much for providing this code. i'm new to jsPDF so am still figuring out how to use it, and i was wondering if you could recommend how to randomly add one of a few images rather then specifying exactly which image to use? i assume this would be done modifying:

context.drawImage(images.base_image,0,0, 1100, 1700);

but i'm not able to accomplish this. any help is appreciated! thank you!

edit: i've figured out the randomization of images, but was wondering if you could explain a bit how to size and position the images throughout the various steps a little bit.

[ipsjolly]

Found a way around!!!!! for this then posted a tutorial for here http://freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas/