jsPDF browser death

Question

I am stuck with and issue on jsPDF (first time using it) and Chrome / Firefox dying (Aw Snap! / stops working) and I cannot find the reason, although I have suspicions it is resources related.

I am working on a menu tool for a franchise chain. The tool will load all menu dishes available to the stores and allow each store to select their menu. Upon completion, I want to create a PDF of all selected dishes and recipes. There is (currently) 146 in total, with more to come.

Each menu sits in its own accordion (Breakfast, Sandwiches, etc...) and when the store finishes selecting the dishes, they can export them to PDF. My code works perfectly for the text component of the dishes, but it fails (without a failure message!) when I add the dish images (jpg/png) to the doc.

To test this, I have:

1. Added the pre-encoded logo image command (which I add to the cover page OK) to a dish instead of the dish image, and then I run for one dish only. It works OK, with the logo appearing in place of the dish image.

2. When I loop through the breakfast accordion to create the pages with the logo in palce of dish image, the browsers stop working.

3. If I comment out the dish imageAdd statement, it works just fine creating the pDF with the 45 odd pages and text content.

I believe this is a resource issue with jsPDF. Any thoughts / ideas appreciated.

My test code (with the one logo image instead of dish image):

function createFiles(accordion, doc, title) {

    var page_num = 0;
    var left_margin = 2;
    var text_start = 9;
    var line_height = 1;
    var next_line_pos = 0;
    var page_width = 17;
    var temp_HTML = "";

    /* COVER PAGE */
    doc.setFontSize(22);
    doc.setFontStyle('bold');
    doc.text(5, 10, 'TCE Menu Recipes: ' + title);
    doc.setFontSize(16);
    doc.text(7, 12, 'TCE Store: ' + sessionStorage.store_name);
    doc.text(8, 24, 'TCE Confidential');

    var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
    doc.addImage(imgData, 'JPG', 5, 1, 10, 6);

    /* LOOP THROUGH BREAKFAST MENU */
    jQuery('#' + accordion + ' > div').each(function() {

        /* NEW PAGE PER DISH */
        page_num = page_num + 1;
        doc.addPage();

        /* BUILD PAGE HEADER & FOOTER */
        doc.setFontStyle('normal');
        doc.setFontSize(8);
        var hdr_menu = 'TCE Menu Recipes: ' + title;
        hdr_menu = hdr_menu.rpad(' ', 70); 
        var hdr_store = 'TCE Store: ' + sessionStorage.store_name;
        hdr_store = hdr_store.rpad(' ', 60); 
        var hdr_confidential = 'TCE Confidential';
        var hdr_page = 'Page: ' + page_num;
        hdr_page = hdr_page.lpad(' ', 40); 
        var hdr_string = hdr_menu + hdr_store + hdr_confidential + hdr_page;
        doc.text(1, 1, hdr_string);
        doc.text(1, 29, hdr_string);
        doc.setFontSize(12);

        /* PRODUCTION CODE, USE DISH IMAGE */
//      var imageUrl = jQuery('#' + this.id + 'i').attr('src');
//      var extn = imageUrl.substring(imageUrl.lastIndexOf(".") + 1, imageUrl.length);
//      if((extn != 'jpeg') && (extn != 'jpg') && (extn != 'png')) {
//          doc.text(5, 2, 'Image Type Not Supported!');
//      } else {
//          convertImgToBase64(imageUrl, function(base64Img){
//              doc.addImage(base64Img, extn, 1, 1, 10, 6);
//          });
//      };

        /* TEST CODE, USING LOGO IMAGE */
        var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
        doc.addImage(imgData, 'JPG', 5, 2, 10, 6);
        imgData = "";

        /* DISH DETAILS BELOW - DESC, NAME & INGRED */
        doc.setFontStyle('bold');
        doc.text(left_margin, text_start, 'Dish Name:');
        doc.setFontStyle('normal');     
        doc.text(left_margin + 5, text_start, jQuery('#' + this.id + 'n').val());

        next_line_pos = text_start + line_height;

        doc.setFontStyle('bold');
        doc.text(left_margin, next_line_pos, 'Dish Description:');
        next_line_pos = next_line_pos + line_height;
        doc.setFontStyle('normal');
        lines = doc.splitTextToSize(jQuery('#' + this.id + 'd').val(), page_width);
        doc.text(left_margin, next_line_pos, lines);        

        next_line_pos = next_line_pos + line_height * lines.length;

        doc.setFontStyle('bold');
        doc.text(left_margin, next_line_pos, 'Ingredients: ');      
        next_line_pos = next_line_pos + line_height;
        doc.setFontStyle('normal');
        lines = doc.splitTextToSize(jQuery('#' + this.id + 'g').val(), page_width);
        doc.text(left_margin, next_line_pos, lines);        

    });
};

If I comment out the following code, it creates the text PDF OK, with the logo on the cover page and 45 odd pages of text only.

            /* TEST CODE, USING LOGO IMAGE */
//          var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
//          doc.addImage(imgData, 'JPG', 5, 2, 10, 6);
//          imgData = "";

Answer 1

I had this very problem and it did indeed end up being a lack of resources. It appears that you may be using the same image on all of the pages. If that is the case, then you can use the built in alias in jsPDF. It will allow you to load the image to the document as a single element one time. Once it is loaded as an element, you can then render it however many times you want in the document without taxing the resources.

While creating your first page with the logo, use an alias like this:

doc.addImage(imgData, 'JPG', 5, 2, 10, 6,'myImageAlias');

Then in all subsequent image insertions, insert them with this statement:

doc.addImage('myImageAlias','JPG', 5, 2, 10, 6);