0

is there a one-stop-shop library that'll pull my html/css (post js actions) as it is and convert it into an image, like png? my complication is the page's js can be rendering svg's or any sort of styles after load - i won't know.

i know there are ways on the server-side, but i'd really like to implement this at the client.

I also know there is canvg to convert svg, but I don't know in advance what my page will have - canvas, svg, can have just about anything. So I need a rather robust tool.

any ideas? html2canvas didn't work for me; it left out the svg's as well as js manipulations on css.

thank you.

bumpkin
  • 3,321
  • 4
  • 25
  • 32
  • you should check out http://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf/3514404#3514404 – Ben Apr 04 '14 at 18:21

3 Answers3

0

If you´d like to use kind of an image of the webiste you can use iframe like so <iframe src="page.html" width="300" height="300">What should be display if the iFrame isn´t</iframe> iFrame includes the original website (for example page.html) in an little window (in this case 300px by 300px) in the other website.

Ben
  • 63
  • 1
  • 9
  • Sorry - i'd like to let the user download a picture of the page so iframe wouldn't work. – bumpkin Apr 02 '14 at 23:57
  • i spent a few hours trying to add js to this [network graph](http://bl.ocks.org/mbostock/4062045) that will turn the svg into canvas and include css. i guess it's all about appending the css to 'defs'. Wasn't able to do it so I don't know if canvg is a viable option. – bumpkin Apr 04 '14 at 06:47
0

or you can use http://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx to get an svg.

Ben
  • 63
  • 1
  • 9
0

As far as I know there is no plugin that will do everything. I accomplished a similar issue by combining HTML2Canvas and Canvg, basically you will do a pass with HTML2Canvas and then layer Canvg drawings to the canvas created by HTML2Canvas.

Obviously positioning will be critical so you may have to loop through the elements to position them correctly.

David Nguyen
  • 8,368
  • 2
  • 33
  • 49
  • have tried canvg but it doesn't seem to pull in css (like fonts, etc) – bumpkin Apr 04 '14 at 03:39
  • that is not what you use it for, canvg is for SVG's – David Nguyen Apr 04 '14 at 14:08
  • Yes canvg is for SVG's, but it doesn't handle styling outside of its defs element. Putting svg styling in css is a very common process so surprised canvg doesn't handle that common use-case. I'm guessing the only way is for me to traverse through the css. – bumpkin Apr 05 '14 at 19:46