I'm currently using pdfmake to generate project report pdf's given information, and I'm having some trouble getting images to display.

I have a function that generates a pdfmake "object" that goes like this:

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        pageBreak: 'before'
    }
}

I want to add an image to that report given an image URL (something like "images/sample_image.jpg"), and from what I've read on other answers I have to convert it to a base 64 format.

One of these functions was provided in another answer but I can't quite figure out how I'm supposed to be utilizing it:

function convertImgToBase64URL(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

However, I'm not exactly too sure how I should go about using this function to add the image to the first function provided, as it doesn't return the dataURL; if I try something like:

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        image: convertImgToBase64URL(data.image), //data.image is the URL so something like "images/sample_image.jpg"
        width: 300,
        pageBreak: 'before'
    }
}

The image doesn't show up.

I'm currently using pdfmake to generate project report pdf's given information, and I'm having some trouble getting images to display.

I have a function that generates a pdfmake "object" that goes like this:

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        pageBreak: 'before'
    }
}

I want to add an image to that report given an image URL (something like "images/sample_image.jpg"), and from what I've read on other answers I have to convert it to a base 64 format.

One of these functions was provided in another answer but I can't quite figure out how I'm supposed to be utilizing it:

function convertImgToBase64URL(url, callback, outputFormat){
    var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        img = new Image;
    img.crossOrigin = 'Anonymous';
    img.onload = function(){
        var dataURL;
        canvas.height = img.height;
        canvas.width = img.width;
        ctx.drawImage(img, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null;
    };
    img.src = url;
}

However, I'm not exactly too sure how I should go about using this function to add the image to the first function provided, as it doesn't return the dataURL; if I try something like:

function singleProject(data) {
    return {
        text: "Project: \n" + data.title + \n\nImage: \n",
        image: convertImgToBase64URL(data.image), //data.image is the URL so something like "images/sample_image.jpg"
        width: 300,
        pageBreak: 'before'
    }
}

The image doesn't show up.

• javascript
• image
• pdfmake

• Read up - stackoverflow./questions/14220321/… – levi Commented Jun 6, 2016 at 15:49
• What asynchronous operation am I performing? The DataURL conversion (which is why it returns a result of null if I try returning it)? I'm having a bit of trouble wrapping my head around it so some explanation would be great – Ed Wu Commented Jun 6, 2016 at 17:18
• convertImgToBase64URL is an asynchronous function. Notice that the pletion of the function happens inside of img.onload, which is called after convertImgToBase64URL returns. You need to provide a callback function as the 2nd parameter, which will be passed the dataURL, after which you can use it. – levi Commented Jun 7, 2016 at 3:40
• Interesting, thanks. What would that callback function be in this case then? – Ed Wu Commented Jun 7, 2016 at 12:45
• create pdf doc after image creation callback's success – Rohan Pawar Commented Jun 15, 2016 at 5:04

1 Answer 1

Use hidden

<img id='imgToExport' src='someimageurl' style='display:none'/> 

and in JavaScript use

var imgToExport = document.getElementById('imgToExport');
var canvas = document.createElement('canvas');
        canvas.width = imgToExport.width; 
        canvas.height = imgToExport.height; 
        canvas.getContext('2d').drawImage(imgToExport, 0, 0);
  canvas.toDataURL('image/png')

By this way you donot need asynchronous call