Rasterize a fragment of HTML to PNG

Question

I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.

The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.

score 9 · Answer 1 · answered Sep 17 '12 at 18:19

9

One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().

Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.

The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).

Disclaimer: I am the author of rasterizeHTML.js.

answered Sep 17 '12 at 18:19

cburgmer

2,150
1
24
18

both links are dead, however this is the github repo https://cburgmer.github.io/rasterizeHTML.js/ – Anthony Johnston Jul 11 '23 at 21:37

score 3 · Accepted Answer · answered Feb 20 '11 at 14:34

It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.

Although...

it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)

I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.

Thanks, that's good info. Sadly, css3 scaling messes up the jqueryui draggable plugin, which is sort of the point of the thumbnail idea in the first place. Since the elements on the slides are positioned absolutely, it gets pretty ugly to try to do it without scaling. It needs to happen in real time and even when the browser is in offline mode, so serverside won't work. I can't make users install any extensions, so that won't work either. I guess I'll look into fixing the draggable + scaling bugs. — Benson, Feb 20 '11 at 20:07
By the way, this (unanswered) question deals with how to do what I need by using scaled down html elements: http://stackoverflow.com/questions/4987050/how-to-make-css3-scaled-elements-draggable — Benson, Feb 20 '11 at 23:20

score 0 · Answer 3 · answered Oct 13 '15 at 12:45

0

you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library: http://cburgmer.github.io/rasterizeHTML.js/

answered Oct 13 '15 at 12:45

naldir

1

1

Welcome to StackOverflow. When you answer a question, make sure you add some new information. It seems that your solution is the same as [cburgmer](http://stackoverflow.com/users/575501/cburgmer) already [provided here](http://stackoverflow.com/a/12464988/908174) – Luís Cruz Oct 13 '15 at 13:11

Rasterize a fragment of HTML to PNG

3 Answers3

Linked