Generating PDF with images from camera

Ionic Framework ionic-v3
1

Hi i have a problem generating a PDF file in my ionic app using cordova plugin htmlToPDF.

I have images taken with my iphone camera and stored in the dataDirectory with the Filewrite function, and the path is stocked in an sqlite database.

The problem is that my images aren’t visible in the PDF generated and i don’t know why.

here is the html code generated in js :

// My array of images

var photos = ["file:///var/mobile/Containers/Data/Application/FB33F4C7-464C-4AFB-8812-6F4CED6EF930/Library/NoCloud/test1.jpg", "file:///var/mobile/Containers/Data/Application/FB33F4C7-464C-4AFB-8812-6F4CED6EF930/Library/NoCloud/test2.jpg"
];

// Creating html for the PDF

let htmlEmail1 = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
htmlEmail1 += '<html xmlns="http://www.w3.org/1999/xhtml" style="background-color:#89BD29;margin:0px">';
htmlEmail1 += '<head>';
htmlEmail1 += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />';
htmlEmail1 += '<title></title>';
htmlEmail1 += '<style>body, html{font-family:helvetica, sans-serif;background-color:#89BD29;margin:0px}</style>'
htmlEmail1 += '</head>';
htmlEmail1 += '<body>';

for (var i = 0; i < photos.length; i++) {
    htmlEmail1 += '<img src="' + photos[i] + '"/>';
}

htmlEmail1 += '</body>';
htmlEmail1 += '</html>';

cordova.plugins.pdf.htmlToPDF({
                    data: htmlEmail1,
                    documentSize: "A4",
                    landscape: "portrait",
                    type: "base64"
                },
 (success2) => { 
     doSomething() 
});

But the result is an empty transparent square in the PDF…

Best,

Ben

2

There seem to be several different plugins with this name; anybody trying to help would probably need to know which one you’re using.

3

I am using this plugin : cordova-pdf-generator

If anyone is facing this problem i found a temporary solution, i convert my images to base64 like that :
(I tried to do this with the File.readAsDataURL but as i was in a loop, i was facing another problem with promises so maybe this solution is not a best practice but it worked for my problem)

var image = new Image();
image.src = 'file:///var/mobile/Containers/Data/Application/FB33F4C7-464C-4AFB-8812-6F4CED6EF930/Library/NoCloud/test1.jpg';
var canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
var dataURL = canvas.toDataURL("image/jpg");

and then :

htmlToPdf = '<img src="'+ dataURL +'"/>';  

cordova.plugins.pdf.htmlToPDF({
                    data: htmlToPdf,
                    documentSize: "A4",
                    landscape: "portrait",
                    type: "base64"
                },
 (success2) => { 
     doSomething() 
});

Ben

1 Like
4

Actually the code above isn’t working with a lot of images, sometimes the process bug while converting url to base64 and then some images are showed…

If someone have an idea…

5

how can i add multiple images of galery and images in single pdf?