How do I insert an image in a pdf, generated by the pdfmake library, from javascript? in a project in laravel

1

I am starting to use the library and I want to insert an image that is in the public folder of my project in laravel . What I have been doing so far:

let docDefinition = {
    // a string or { width: number, height: number }
    pageSize: { width: 216 * pt, height: 279 * pt },

    // by default we use portrait, you can change it to landscape if you wish
    pageOrientation: 'portrait',

    // [left, top, right, bottom] or [horizontal, vertical] or just a number for equal margins
    pageMargins: [ 30 * pt, 30 * pt, 30 * pt, 30 * pt ],
    content: [
        {
            image: getBase64Image('{{ URL::asset('img/logo_cofasa.jpg') }}'),
        },
        'paragraph 1',
        'paragraph 2',
        {
            columns: [
            'first column is a simple text',
                {
                    stack: [
                        // second column consists of paragraphs
                        'paragraph A',
                        'paragraph B',
                        'these paragraphs will be rendered one below another inside the column'
                    ],
                    fontSize: 15
                }
            ]
        }
    ]
};
pdfMake.createPdf(docDefinition).download('optionalName.pdf');

function getBase64Image(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/jpg");

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

I have read and when capturing an image you must convert Base64 and for that you use canvas . This way I am trying to convert the image to base64 , this error is generated in console:

  

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'       at getBase64Image (devices: 4174)       at HTMLButtonElement. (equipment: 4141)       at HTMLTableSectionElement.dispatch (jquery.min.js: 3)       at HTMLTableSectionElement.r.handle (jquery.min.js: 3)

Update 1:

Following the suggestion of @ lois6b, I no longer generate the error shown above. This error is generated by the library pdfmake :

  

Uncaught invalid image, images dictionary should contain dataURL entries (or local file paths in node.js)

This error is generated at the moment you try to insert the image:

{
    image: 'data:image/jpg;base64,'+getBase64Image('{{ URL::asset('img/logo_cofasa.jpg') }}'),
},

I add:

{{ URL::asset('img/logo_cofasa.jpg') }} generates a file url, eg: sistematpm.local/img/logo_cofasa.jpg

Library links:

Here is the documentation

Here are examples from the library

    
asked by Pablo Contreras 21.07.2017 в 09:09
source

0 answers