html-2-canvas

This a pure javascript html renderer for canvas, using the libraries parse5, css-parse and css-select.

It is intended for use with both node with (node-canvas), and the latest browsers.

!Demo

Caveats

- simple flow engine, no div floating, all elements are either a new line or a line element.
- Treats all elements as div's except for tags the following tags
- span, strong, em, code, samp, kbd, var, b
- This can be expanded on via options.lineTags: [String]
- font, text, color are the only style tags that get applied to children elements.
- fetch is required for downloading images. a polyfill (whatwg-fetch) for unsupported browsers and for node support it needs to be passed as an option.fetch: fetch.
- font-size and font-family must be defined on any parent element for text to render.
- for webpack you need to add the following to config for it to compile

``json
{
"node": {
"fs": "empty"
}
}
`

Supported Html Tags

- div (treats all unknown elements as divs);
- img
- br
- span, strong, em, code, samp, kbd, var, b
- it will render these tags as a line item, though you will need to provide a style for them




Supported CSS Tags

- margin (shorthand and expanded) px only
- padding (shorthand and expanded);
- font (shorthand and expanded) 'shorthand' thanks to canvas font support
- color
- background-color
- width
- em and % text sizing.

`css
body {
font-family: Arial;
font-size: 14px;
padding: 5px;
background-color: rgba(0,0,0);
color: #fff;
}
p {
padding-top: 0px;
padding-left: 5px;
padding-bottom: 5px;
}
strong, b {
font-weight: bold;
}
em, i, var {
font-style: italic;
}
code, samp, kbd {
font-family: monospace;
}
center {
text-align: center;
}

`

$3

- text-decoration
- background (shorthand and expanded)
- border (shorthand and expanded)
- transform
- box-shadow
- position
- margin: auto
- float: left, right, clear: both

TODO

- reduce render time - optimise the multiple loops into a single process loop?

Example - Node >= 7.10

`javascript
import fetch from "node-fetch";

import sourceMapSupport from "source-map-support";
sourceMapSupport.install();
import path from "path";
import fs from "fs";

import Html2Canvas from "html-2-canvas";
import Canvas from "canvas";

const stylesheet =
body {
font-family: Arial;
font-size: 14px;
padding: 5px;
background-color: rgba(0,0,0);
color: #fff;
}
p {
padding-top: 0px;
padding-left: 5px;
padding-bottom: 5px;
}
;
(async() => {
try {
const html =

;
const canvas = new Canvas(500, 500);
const renderer = new Html2Canvas({
stylesheet,
createCanvas({height, width}) {
return new Canvas(height, width);
},
createImage() {
return new Canvas.Image();
},
fetch: fetch,
});
await renderer.render(html, canvas);
canvas.createJPEGStream().pipe(fs.createWriteStream(path.join(process.cwd(), "image.jpg")));
} catch (err) {
console.log("err", err);
}
})();
``

Change Log

$3

- added support for inline styles
- line elements can now use background color
- added lineTags as an options to extend the classification of line typed element
- fixed css inheritancy issue between the parent element and the line elements
- fixed render issue for non renderable elements, added option.doNotRender: [String]
- fixed render issue with children line elements chaining styles from parent line elements

$3

- added support for all css sizing units for all elements
- separated out process and render from core render func
- added test cases for new size unit class

$3

- patch for recursive em font sizing

$3

- removed inheritancy of number with unit size class as it breaks object compare.
- stopped em calculation from multipling on it self.

$3

- uglifyjs has a problem with Size class name or is it the babel compile?

$3

- yes it does.

$3

- Added trim to preprocess each line of the html file instead of trimming the elements
- another em inheritancy fix
- cleaned up files to be a little bit more coherent
- Adjusted line renderer to allow for setting line-height