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: