Html dom elements to image (client side)

Asked Sep 17 '13 at 16:43

Active Sep 17 '13 at 16:45

Viewed 1,073 times

I'm trying to find a way to convert a part of a webpage in an image: I have a dynamically created page, and I would like to "save" a part of it, in an image format.

I know that turning html to image is quite complicated, and could be done by server-side computation with tools like phantom js or other webkit render engine. But I'm trying to find a way to achieve this in client side.

I imagine something like putting the dom elements in a svg (with foreignObject), then rendering the svg in a canvas, and then turning the canvas to base64 string url. But I tried, and I didn't manage to do it.

What do you think about this idea? does it sound possible? I think I first have a way to compute the dom elements css styles in an html string, but that seems very complicated. I guess I need some advice here.

edited Sep 17 '13 at 16:45

Naftali

144,921
39
244
303

asked Sep 17 '13 at 16:43

Sebastien C.

2,099
17
21

2

Have you seen [html2canvas](http://html2canvas.hertzen.com/) yet? – ComFreek Sep 17 '13 at 16:45
In phase 2 "then rendering the svg in a canvas" exactly what HTML rendering engine would be involved? – yPhil Sep 17 '13 at 16:47
https://github.com/ariya/phantomjs/wiki – Daniel Sep 17 '13 at 16:51
@ComFreek: No I've never seen that, it seems very interesting, thanks a lot! – Sebastien C. Sep 17 '13 at 17:04
@Daniel: I thought PhantomJS was only server-side. I'll read more the wiki to see if I can use it on client-side – Sebastien C. Sep 17 '13 at 17:06
possible duplicate of [Generate image from DOM elements](http://stackoverflow.com/questions/6162678/generate-image-from-dom-elements) – Alain1405 Apr 27 '14 at 03:20
you may want to try [dom-to-image](https://github.com/tsayen/dom-to-image) – tsayen Oct 02 '15 at 14:24

Html dom elements to image (client side)

0 Answers0