3

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.

Ed Wu
  • 107
  • 2
  • 2
  • 8
  • Read up - http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – levi Jun 06 '16 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 Jun 06 '16 at 17:18
  • `convertImgToBase64URL` is an asynchronous function. Notice that the completion 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 Jun 07 '16 at 03:40
  • Interesting, thanks. What would that callback function be in this case then? – Ed Wu Jun 07 '16 at 12:45
  • create pdf doc after image creation callback's success – Rohan Pawar Jun 15 '16 at 05:04
  • https://www.ngdevelop.tech/insert-image-from-url-in-pdf-using-pdfmake/ – Mahesh Mar 09 '21 at 06:38

1 Answers1

6

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

Balajiprasad Ramesh
  • 86
  • 4
  • Thank, this looks really straight-forward. In my case, I'd like to produce 32 small images on the fly. Is it possible to use this code in a for loop? – Thailandian Jun 07 '16 at 17:23
  • Also, does the size of the uri data depend on the dimensions of the canvas image or the original sourcce? – Thailandian Jun 07 '16 at 17:28
  • Echoing Thailandian, I'm trying to generate a 64base for a bunch of images in a loop (is there a way to not require an ID and just use the URL?). I don't know if the asynchronous part is being fixed, as I log the data URL and that gets logged after the pdf generates (added a return statement to return the data URL in my personal code). – Ed Wu Jun 08 '16 at 18:40