npm install html-2-canvasThis 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
- 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"
}
}
- 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
- 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;
}
`
- text-decoration
- background (shorthand and expanded)
- border (shorthand and expanded)
- transform
- box-shadow
- position
- margin: auto
- float: left, right, clear: both
- reduce render time - optimise the multiple loops into a single process loop?
`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 =
asddHELLO
Howdy" "
Stranger
lets play?
2nd
3rd4th
111111111111111111111111111
3rd4th
5thlol
asddHELLO
;
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);
}
})();
``- 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
- 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
- patch for recursive em font sizing
- removed inheritancy of number with unit size class as it breaks object compare.
- stopped em calculation from multipling on it self.
- uglifyjs has a problem with Size class name or is it the babel compile?
- yes it does.