Trying to generate project report pdf's using pdfmake has presented a challenge when it comes to displaying images.
A function I have for creating a pdfmake "object" looks like this:
function singleProject(data) {
return {
text: "Project: \n" + data.title + "\n\nImage: \n",
pageBreak: 'before'
}
}
To include an image in the report based on a URL (such as "images/sample_image.jpg"), it seems that I need to convert it to a base 64 format according to various answers I've come across.
One of these answers provided a function for converting the image, but integrating it is where I'm stuck:
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;
}
I'm unsure how to properly utilize this function to insert the image into the initial function provided, since it doesn't directly return the dataURL. If I attempt something like this:
function singleProject(data) {
return {
text: "Project: \n" + data.title + "\n\nImage: \n",
image: convertImgToBase64URL(data.image), //data.image being the URL e.g. "images/sample_image.jpg"
width: 300,
pageBreak: 'before'
}
}
The image fails to display.