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 18 · Answer 1 · answered Mar 18 '18 at 17:57

18

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

381
4
10

2

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
1

I had problems with html2canvas, I could not figure out how to get rid of extra white space, chopped elements, DOM-to-image worked right away – Jacob David C. Cunningham Jul 26 '21 at 07:23
I struggled with the html2canvas white space gap for 2 days! thanks God this lib exists – Benzara Tahar Sep 06 '21 at 22:12

score 5 · Answer 2 · answered Nov 13 '20 at 02:34

5

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 Guo

547
7
8

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 3 · Answer 3 · answered May 03 '17 at 09:15

3

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

723
7
19

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

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

2

rasterizeHTML.js renders HTML into the browser's canvas

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

answered Aug 29 '20 at 23:03

Vitalicus

1,188
13
15

Div or html to image (alternative to html2canvas)

4 Answers4