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.

1

3 Answers 3

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.

2
  • Sorry - i'd like to let the user download a picture of the page so iframe wouldn't work.
    – bumpkin
    Apr 2, 2014 at 23:57
  • i spent a few hours trying to add js to this network graph 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 4, 2014 at 6:47
0

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

1
  • may I have your html code? I tested this site and it worked perfectly.
    – Ben
    Apr 3, 2014 at 4:59
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.

3
  • have tried canvg but it doesn't seem to pull in css (like fonts, etc)
    – bumpkin
    Apr 4, 2014 at 3:39
  • that is not what you use it for, canvg is for SVG's Apr 4, 2014 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 5, 2014 at 19:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.