Div or html to image (alternative to html2canvas)

Question

I did my homework and search several times how to make a "screenshot" of a div or any element on html.

html2canvas works nice but I have problems with: - The quality of the image generated. - If the div have images stored on other domains. - Some elements like rounded divs (inside de main div) are generated squared.

Is there any alternative? Don't discard paid alternatives.

Thanks!!!

you may take a look at http://stackoverflow.com/a/34272744/1321167 — vijayP, May 03 '17 at 09:18

score 9 · Answer 1 · answered Mar 18 '18 at 17:57

9

See if this DOM-to-Image works for you - https://github.com/tsayen/dom-to-image

It's a library written in JavaScript which can turn arbitrary DOM node into a vector (SVG) or raster (PNG or JPEG) image.

answered Mar 18 '18 at 17:57

Abhishek K

161
2
8

1

This Library has better predictability than html2canvas when it comes to images. – Alvin Moyo May 29 '20 at 22:50
Thanks, DOM-to-Image is so much better than html2canvas imo, so much more reliable. – MahmoudThePeltist Dec 07 '20 at 20:09

score 2 · Answer 2 · answered May 03 '17 at 09:15

2

You could look into http://phantomjs.org/, specifically the https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js example where you are able to save HTML to an image or PDF - effectively creating a screenshot. It is very customisable and I have used this to create PDFs from lists of URLs with ease. It is a server side solution, so would need a little more setup your end.

answered May 03 '17 at 09:15

Luke P

658
4
19

I would like to avoid server side stuff but thanks any way! – Car Lautaro May 03 '17 at 22:55

score 1 · Answer 3 · answered Nov 13 '20 at 02:34

1

I've used both html2canvas and dom-to-image, they both works well, but it seems that dom-to-image works better with images and has better predictability.

answered Nov 13 '20 at 02:34

FRANK GO

11
1

I totally agree, the images tend to be a lot more like your HTML, plus it's much more compatible with bootstrap. – MahmoudThePeltist Dec 07 '20 at 20:09

score 0 · Answer 4 · answered Aug 29 '20 at 23:03

0

rasterizeHTML.js renders HTML into the browser's canvas

https://cburgmer.github.io/rasterizeHTML.js/

answered Aug 29 '20 at 23:03

Vitalicus

619
5
14

Div or html to image (alternative to html2canvas)

4 Answers4