How to use "html2canvas" on n8n?

Hello,
I am looking to a way of creating dynamic images (something like BannerBear) but with this library: html2canvas.

Basically what it does is creating a JPG image from an HTML document. So you can create your own images. I installed html2canvas on my server where I have n8n, but I don’t know how to use it with n8n.

Following this tutorial, it is easy creating a JPG. You just need to include the library to your HTML head section:
<script src="assets/js/lib/html2canvas.js"></script>

And then call the html2canvas method. Here’s an example:

			//var container = document.getElementById("image-wrap"); //specific element on page
			var container = document.body; // full page 
			html2canvas(container).then(function(canvas) {
                var link = document.createElement("a");
                document.body.appendChild(link);
                link.download = "html_image.png";
                link.href = canvas.toDataURL("image/png");
                link.target = '_blank';
                link.click();
            });

But how to use it on n8n? How can I get the image result and process it on n8n?

Any idea?

Thank you!

Do not think that you can use that library, and it seems to work just on the client-side. There must be alternatives libraries to achieve the same result in nodejs.

1 Like

Thank you!
Sorry because I don’t know a lot about servers… :sa:

I have installed Puppeteer on my server, as your link suggests. But now I don’t know how to use it on n8n. If I try to run in on a Function node I get the error ERROR: Access denied to require 'puppeteer'.

I tried the two solutions here but I didn’t manage it to work…

How can I use it Puppeteer on n8n?

You need to create a custom image that has that library installed. Then you have to the env variable NODE_FUNCTION_ALLOW_EXTERNAL with the name of the package.

So, does it means I need to reinstall n8n again?

You have to start n8n with that env variable.

Sorry, I have no idea on how to do it… :S

Finally I managed to start n8n with that ENV variable, following these instructions. I added this line to my docker-compose.yml file:

NODE_FUNCTION_ALLOW_EXTERNAL=puppeteer

Now, when I start n8n again and test a Function node with const puppeteer = require('puppeteer'); on it, I get this error: ERROR: The module 'puppeteer' is not whitelisted in VM.

I searched for more information about this error and I found this, where @jan says "add the package to your packages/cli/package.json" but I don’t found this directory. It doesn’t exists. I do have an /home/n8n/package.json with this content:

{
  "dependencies": {
    "puppeteer": "^10.1.0"
  }
}

What should I do?

Thank you!

You probably have to create a custom image that adds that dependency to n8n/packages/nodes-base/package.json. So, you have to:

  1. Clone the project

  2. Go to directory n8n/packages/nodes-base/package.json

  3. Install the dependency npm install --save puppeteer

  4. Create custom image using the docker file n8n/Dockerfile at master · n8n-io/n8n · GitHub (docker build)

  5. Push that image to docker registry (or any other registry) (docker push)

  6. Reference your image in the docker-compose n8n/docker-compose.yml at master · n8n-io/n8n · GitHub

  7. Deploy

1 Like