Rendering HTML Elements to <Canvas>

Rendering HTML elements to canvas

You won't get real HTML rendering to <canvas> per se currently, because canvas context does not have functions to render HTML elements.

There are some emulations:

html2canvas project http://html2canvas.hertzen.com/index.html (basically a HTML renderer attempt built on Javascript + canvas)

HTML to SVG to <canvas> might be possible depending on your use case:

https://github.com/miohtama/Krusovice/blob/master/src/tools/html2svg2canvas.js

Also if you are using Firefox you can hack some extended permissions and then render a DOM window to <canvas>

https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas?redirectlocale=en-US&redirectslug=Drawing_Graphics_with_Canvas#Rendering_Web_Content_Into_A_Canvas

How can I convert an HTML element to a canvas element?

Sorry, the browser won't render HTML into a canvas.

It would be a potential security risk if you could, as HTML can include content (in particular images and iframes) from third-party sites. If canvas could turn HTML content into an image and then you read the image data, you could potentially extract privileged content from other sites.

To get a canvas from HTML, you'd have to basically write your own HTML renderer from scratch using drawImage and fillText, which is a potentially huge task. There's one such attempt here but it's a bit dodgy and a long way from complete. (It even attempts to parse the HTML/CSS from scratch, which I think is crazy! It'd be easier to start from a real DOM node with styles applied, and read the styling using getComputedStyle and relative positions of parts of it using offsetTop et al.)

including raw HTML node to canvas element

Shortening the canvas (height) and appending div node to the HTML,

    var div = document.createElement("div");
div.innerHTML= html
display_element.appendChild(div);

solved my problem.

Rendering html content to canvas

You cannot render arbitrary HTML to the canvas.

There are some libraries that approximate it, but that's all you've got for options for now.

There has been some discussion since at least 2009 about rendering "HTML document fragments" to the canvas, but no browser has seriously considered implementing anything like it yet.

To quote the HTML Canvas specification:

Note: A future version of the 2D context API may provide a way to render fragments of documents, rendered using CSS, straight to the canvas.

(Source: WHATWG Spec)

Render HTML to an image

There is a lot of options and they all have their pro and cons.

Option 1: Use an API

  • ApiFlash (based on chrome)
  • EvoPDF (has an option for html)
  • Grabzit
  • HTML/CSS to Image API
  • ...

Pros

  • Execute Javascript
  • Near perfect rendering
  • Fast when caching options are correctly used
  • Scale is handled by the APIs
  • Precise timing, viewport, ...
  • Most of the time they offer a free plan

Cons

  • Not free if you plan to use them a lot

Option 2: Use one of the many available libraries

  • dom-to-image
  • wkhtmltoimage (included in the wkhtmltopdf tool)
  • IMGKit (for ruby and based on wkhtmltoimage)
  • imgkit (for python and based on wkhtmltoimage)
  • python-webkit2png
  • ...

Pros

  • Conversion is quite fast most of the time

Cons

  • Bad rendering
  • Does not execute javascript
  • No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
  • Sometimes not so easy to install
  • Complicated to scale

Option 3: Use PhantomJs and maybe a wrapper library

  • PhantomJs
  • node-webshot (javascript wrapper library for PhantomJs)
  • ...

Pros

  • Execute Javascript
  • Quite fast

Cons

  • Bad rendering
  • No support for recent web features (FlexBox, Advanced Selectors, Webfonts, Box Sizing, Media Queries, ...)
  • Complicated to scale
  • Not so easy to make it work if there is images to be loaded ...

Option 4: Use Chrome Headless and maybe a wrapper library

  • Chrome Headless
  • chrome-devtools-protocol
  • Puppeteer (javascript wrapper library for Chrome headless)
  • ...

Pros

  • Execute Javascript
  • Near perfect rendering

Cons

  • Not so easy to have exactly the wanted result regarding:
    • page load timing
    • viewport dimensions
  • Complicated to scale
  • Quite slow and even slower if the html contains external links

Disclosure: I'm the founder of ApiFlash. I did my best to provide an honest and useful answer.



Related Topics



Leave a reply



Submit