I'm tryna use the jsPDF library. I'd like to load and insert an image, and export the PDF file.

My issue is about the image loading. I'm doing this: var imageData = getBase64Image('thinking-monkey.jpg'); and I should get the dataURL in base64 inside imageData.

My getBase64Image() function does the following:

function getBase64Image(url) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');

    }

    return dataURL;
}

But it returns 'undefined', because the image is like 65 Kb and doesn't load up at once. So when at return dataURL; the variable is still undefined.

I've tried to add a setTimeout() right before return dataURL; but it doesn't seem to be working.

How can I wait until the image is fully loaded to return dataURL?

Thanks.

I'm tryna use the jsPDF library. I'd like to load and insert an image, and export the PDF file.

My issue is about the image loading. I'm doing this: var imageData = getBase64Image('thinking-monkey.jpg'); and I should get the dataURL in base64 inside imageData.

My getBase64Image() function does the following:

function getBase64Image(url) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');

    }

    return dataURL;
}

But it returns 'undefined', because the image is like 65 Kb and doesn't load up at once. So when at return dataURL; the variable is still undefined.

I've tried to add a setTimeout() right before return dataURL; but it doesn't seem to be working.

How can I wait until the image is fully loaded to return dataURL?

Thanks.

• javascript
• jspdf

Share Follow asked Aug 28, 2013 at 10:22 gaelgael 5511 gold badge11 silver badge88 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

You can use a callback. Pass the code that you want to execute after the image is fully loaded to the getBase64Image function, and execute it in the .onLoad function.

it would be something like this. (generatePdf is a function)

function getBase64Image(url,generatePdf) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');
        generatePdf(dataUrl);
    }
}
var generatePdf= function generatePdf(imageData){
   /** this function receives the image param and creates the pdf with it**/
   var doc = new jsPDF();
   doc.addImage(imageData, "JPEG", 60,50); 
   doc.save("test.pdf");
};

function generateImagePdf(url){ 
    getBase64Image(url, generatePdf);
}
//now call the generateImagePdf function, which will call the generateBase64Image function and wait for tyhe image to load to call the generatePdf function with the param
generateImagePdf("imageurl.jpg") ;

Move the "return" statement inside the img.onload function, this should do it I suspect.

function getBase64Image(url) {
    var img = new Image();
    var dataURL;

    img.src = url;

    img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;

        var context = canvas.getContext('2d');
        context.drawImage(img, 0, 0);

        dataURL = canvas.toDataURL('image/jpeg');

        return dataURL;   /* MOVED */
    }
}