Adding image to Invoice footer

Self-Hosted | v4/Legacy
1

Is it possible to insert an image into the invoice footer? I’m trying to place a QR code png for mobile payments into the invoice footer area and tried editing the custom invoice design under footer. I was looking at this website but not sure if I referenced the image correctly as it does not seem to work and has errors above the preview section. I tried both a url reference and placing the image directly in the root invoiceninja folder and just referencing it as ‘qrcode.png’.

I’ve no coding experience so if anyone can point out specifically what is wrong, I would greatly appreciate! Thank you!

[
  {
    "canvas": [
      {
        "type": "line",
        "x1": 0,
        "y1": 0,
        "x2": 600,
        "y2": 0,
        "lineWidth": 100,
        "lineColor": "$secondaryColor:#292526"
      }
    ]
  },
  {
    "columns": [
      {
        "text": "$invoiceFooter",
        "margin": [
          40,
          -40,
          40,
          0
        ],
        "alignment": "left",
        "color": "#FFFFFF"
      },
    {
			image: 'http://www.mywebsite.com/images/qrcode.png',
			fit: [100, 100]
		}
    ]
  }
]
2

Hi,

You can either use the PDF library to dynamically generate the QR code:

https://pdfmake.github.io/docs/0.1/document-definition-object/qr/

Or embed the image as base64:

https://pdfmake.github.io/docs/0.1/document-definition-object/images/

2 Likes
3

Thanks for the super quick reply Hillel!

I’ve used an online converter to get the base64 string for my image and pasted it via the admin panel but seem to be getting an error. (error here: https://i.imgur.com/D4eo3MV.png)

Is there an issue pasting the long string into the editor?

4

Try changing the single quote to a double quote, it may help

5

Just tried that. This time the red highlight on the string is gone, but there still seems to be an error

Uncaught Error: Parse error on line 29: …lFTkSuQmCC", fit: [100, 100], ----------------------^ Expecting ‘STRING’, got ‘undefined’

the last couple of lines in the string: https://i.imgur.com/shWrCFr.png

6

You may want to see if using a smaller image helps

7

the image is just 12kb. I can’t seem to make it any smaller in kb size or lesser chars for the 64base string. :thinking:

8

Sorry, I’m not sure. There could be a typo in your design.

9

sorry for the late response. But I just noticed this on the pdfmake website
“// Warning! Make sure to copy this definition and paste it to an
// external text editor, as the online AceEditor has some troubles
// with long dataUrl lines and the following image values look like
// they’re empty.”

Could it be the image string is too long and cannot be pasted on the online editor under Settings > Customize Design? Is there a file I can edit externally on a text editor and upload?

10

Sorry, I’m not sure. You may want to consider upgrading to v5.

11

I’ve been trying to migrate across various v4 versions now but keep hitting a roadblock and errors when I try :confused:

12

What error are you seeing?