Newsflash: Saving HTML Pages or Snippets as an Image

Posted on Posted in Javascript, web design

There’s a nice JavaScript project allowing you to save HTML snippets as an image. I didn’t test it yet, but the Fiddles look nice (for instance, this one).

Basically, the library traverses the DOM, using an HTML5 canvas to draw the elements it finds. In other words, it’s an HTLM rendering engine written in JavaScript. Most likely, that means that the library only supports a small fraction of the giant set of HTML attributes and elements. But still, it seems to support many common use cases.

Another approach is putting foreign objects into an SVG and to draw that SVG image into an HTML5 canvas. The foreignObject is currently only partially supported by most browsers, but even so it seems to do the trick for many common usecases.

Leave a Reply

Your email address will not be published.