5

I am writing an nodejs script which will generate some info-graphic images using HTML.

I have used jsdom library to generate the graphics with basic html elements (divs, headings, paragraphs, etc.). 

const jsdom = require('jsdom');
const { document } = (new jsdom.JSDOM()).window;

const wrapper = document.createElement("div");
wrapper.style.cssText = "background:#eee;";
...
const el = document.createElement("div");
el.style.cssText = "background:red;";
el.innerText = "Sample Text";
...
wrapper.appendChild(el);

I can save this generated html (wrapper) to a file. The saved file looks as expected. So the HTML generation part works fine.

But my requirement is to generate an image file (png, jpg, svg, or anything similar) with this generated html view.

I have tried, dom-to-image and html-to-image both failing saying "HTMLCanvasElement is not defined". I understand that since there is no browser in nodejs runtime, there are limitations such as these.

Is there a way to somehow generate an image from these generated HTML?

NOTE: This script will be running on a CICD pipeline on a linux server.

Improve this question
1
  • 1
    I'm late to the party but you could try puppeteer (headless chrome), I've never used it but seen good results in a specific app I collaborated in for a while. github.com/puppeteer/puppeteer Commented Jan 9, 2020 at 1:01

1 Answer 1

Reset to default
10

A little bit of a self-plug here but I just recently did the same thing with a project called kb-hologram.

It basically takes handlebar templates (either SVG or HTML), and renders that to either an SVG or png.

Basically, after having a ready HTML file, I load the HTML into a puppeteer instance (which actually runs a headless chrome browser), take a snapshot of the rendered HTML, and saves it.

it can generate things like a test report image (obviously fake numbers), or a changelog image similar to what vscode publishes in their tweets: enter image description here

HTML

Here's the gist of it:

// handles rendering the HTML templates
// https://github.com/puppeteer/puppeteer
import puppeteer from 'puppeteer';
import { writeFile } from 'fs-extra';

(async () => {

  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({
    height: this.options.height,
    width: this.options.width
  });

  // If your HTML is saved to a file, you load it like this:
  await page.goto('file://' + this.templateFilePath);

  // if your HTML is in memory (as a string), you load it like this:
  // page.setContent(htmlString);

  const imageBuffer = await page.screenshot({});

  await browser.close();

  // write file to disk as buffer
  await writeFile('rendered.png', imageBuffer);

  // convert to base64 string if you want to:
  console.log(imageBuffer.toString('base64'));
})();

SVG

Generating an SVG is much simpler since it's basically a text file:

import { compile } from 'handlebars';

(async (data) => {
  // generate the svg template as string
  const template = await this.getTemplateAsString();

  // make it a handlebars template
  const handlebarsTemplate = compile(template);

  // load the data into the template
  // this is basically the content of the SVG file
  const svgString = handlebarsTemplate(data);

  // from here on, it's basically the same thing :-)
  const svgBuffer = Buffer.from(svgString, 'utf8');
})(data);

Headless browser

To me, handling things like external resources is easier on a real browser if you want to load fonts and styles from CDNs. There are solutions out there to take a screenshot from jsdom directly if you don't want to introduce another "browser" module into the mix. Also, take note that this will download an instance of chrome as a dependency

kb-hologram

The project is still in early stages. Feel free to contribute to kb-hologram, fork the code, or write your own using the example. I personally use it on Travis CI to publish tweets and images as PR comments on GitHub.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Excellent. Works perfectly. I just had all the content in memory. Need to do some minor tweaks to take the screenshot in the size I want. Thank you.
sure! my pleasure! you basically change the size of the image based on the size of the viewport. you can pass whatever width and height that suits your needs and that will be the dimensions of the screenshot
Quickly went through the puppeteer API and found that you can clip the screenshot. Updating the answer to include clipping.
Usually clipping the rendered HTML is done when you just want to render a small portion of it. Since you are the one that is writing your templates, it sounds like you don't really need clipping. No?
Yeah. You don't. But in my case, my element size is dynamic. I cannot define the browser size beforehand. So, I make the browser bit large and crop the screenshot to the size I need by using the element size.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.