Pdfmake: Inserting an Image from a local folder

[bhagyamaheshi]

Hi,

I am successful in generating a PDF using pdfmake. But I am having hard time inserting images. I have altogether 17 images. They are placed in a local folder.
As the library needs to use base64 encoded images I tried with the base64 conversion functions as,
content: [ { text: 'Country Profile - '+ self.country_name , style: 'header',margin: 5 }, { Image: function(flag){ return getBase64Image(flag) }

`getBase64Image: function(img){
// Create an empty canvas element
var canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;

    // Copy the image contents to the canvas
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    // Get the data-URL formatted image
    // Firefox supports PNG and JPEG. You could check img.src to
   // guess the original format, but be aware the using "image/jpg"
   // will re-encode the image.
   var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
  }`

But when I run the code I get the error TypeError: this.baseSystem is undefined. I would be greateful If you can provide an answer on this issue.

[Chris--A]

I had this issue also.
I believe it is the browsers fault (blocking the image). JavaScript in Chrome especially, seems to require user interaction to use any local files (file input, or drag n drop).

I had to create the data url's and save them in an array, then I used those strings in the image dictionary.

[bhagyamaheshi]

Thank you very much for the information. Apart from those 17 images I am randomly selecting a flag of a country from pool of flags which needs to be append to the file. So If I have to store them in an array it seems pretty unrealistic.

[Chris--A]

Might be a hassle getting them in first, but they shouldn't be a problem. I mean, with pdfmake and jquery,... there is already like 2~ Mb of code. And using a small python script or something you could run through a directory of files pretty easily and generate the script.

Or all the flags could be combined to a single image. Then JS could select a pixel region from it to use.

[bhagyamaheshi]

Thank you very much for the information Christopher. I gave a thought about
your previous idea and then worked a bit around and now half way through to
make it work. Hopefully it will work.

Thank you again

On Mon, Nov 21, 2016 at 9:00 PM, Christopher Andrews <
[email protected]> wrote:

Might be a hassle getting them in first, but they shouldn't be a problem.
I mean, with pdfmake and jquery,... there is already like 2~ Mb of code.
And using a small python script or something you could run through a
directory of files pretty easily and generate the script.

Or all the flags could be combined to a single image. Then JS could select
a pixel region from it to use.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
https://github.com/bpampuch/pdfmake/issues/755#issuecomment-261945570,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AK5RDq63awIUvWoUDy0BcvSdS-yBjXW0ks5rAaQCgaJpZM4K30TP
.

_Bhagya Maheshi,_

_M.Eng (Asian Institute of Technology), B.Sc Eng Hons (Ruhuna), AMIESL
(Sri Lanka)_

[WhoKnocks]

You can convert the images to base64 yourself and use the Strings directly in javascript.

Google: Base64 Image Encoder

[bhagyamaheshi]

I used this method and was able to generate the pdf with the images.
http://jsfiddle.net/handtrix/YvQ5y/

[MohammedEssehemy]

@bhagyamaheshi thanks, you saved my day.

[ervansanjaya]

@bhagyamaheshi Hi, any idea on how to convert the base 64 image then generate PDFMake immediately after the generation (in one function)? Because I'm having trouble that the conversion has not been complete, and I need to trigger the function again to generate PDFMake.