how to capture screenshot in html using js or jquery

Question

I'm need my clients be able to capture screenshot of any page of my website using button like this:

<button>Take screenshot</button>

I tried to use html2canvas but it's doesn't work properly for me because i have iframe's in my website and it's cause some session problems.

someone have solution for this?

i looked all over google and didn't found something that's helps me much.

Have you taken a look at this? http://stackoverflow.com/questions/4912092/using-html5-canvas-javascript-to-take-screenshots — Chris Yongchu, Dec 14 '15 at 17:03

Itay Grudev · Answer 1 · 2018-04-12T09:14:32.133

12

Look at the html2canvas project. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire body or just a specific element.

It is also really easy to use. Here is an example:

html2canvas(document.body, {
  onrendered: function(canvas) {
    document.body.appendChild(canvas);
  }
});

You can adapt it to your code relatively easy.

Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.

edited Apr 12 '18 at 09:14

answered Dec 14 '15 at 17:13

Itay Grudev

6,173
4
46
79

1

This should have been the accepted answer. :) – Puspam Sep 08 '20 at 14:26
@Puspam But that wouldn't get me the [`Populist`](https://stackoverflow.com/help/badges/62/populist) badge. I want that badge! – Itay Grudev Sep 09 '20 at 11:56

score 9 · Answer 2 · answered Dec 14 '15 at 17:09

you can use HTML5 and JavaScript this is a sample code that worked for me.

(function (exports) {
    function urlsToAbsolute(nodeList) {
        if (!nodeList.length) {
            return [];
        }
        var attrName = 'href';
        if (nodeList[0].__proto__ === HTMLImageElement.prototype
        || nodeList[0].__proto__ === HTMLScriptElement.prototype) {
            attrName = 'src';
        }
        nodeList = [].map.call(nodeList, function (el, i) {
            var attr = el.getAttribute(attrName);
            if (!attr) {
                return;
            }
            var absURL = /^(https?|data):/i.test(attr);
            if (absURL) {
                return el;
            } else {
                return el;
            }
        });
        return nodeList;
    }

    function screenshotPage() {
        urlsToAbsolute(document.images);
        urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));
        var screenshot = document.documentElement.cloneNode(true);
        var b = document.createElement('base');
        b.href = document.location.protocol + '//' + location.host;
        var head = screenshot.querySelector('head');
        head.insertBefore(b, head.firstChild);
        screenshot.style.pointerEvents = 'none';
        screenshot.style.overflow = 'hidden';
        screenshot.style.webkitUserSelect = 'none';
        screenshot.style.mozUserSelect = 'none';
        screenshot.style.msUserSelect = 'none';
        screenshot.style.oUserSelect = 'none';
        screenshot.style.userSelect = 'none';
        screenshot.dataset.scrollX = window.scrollX;
        screenshot.dataset.scrollY = window.scrollY;
        var script = document.createElement('script');
        script.textContent = '(' + addOnPageLoad_.toString() + ')();';
        screenshot.querySelector('body').appendChild(script);
        var blob = new Blob([screenshot.outerHTML], {
            type: 'text/html'
        });
        return blob;
    }

    function addOnPageLoad_() {
        window.addEventListener('DOMContentLoaded', function (e) {
            var scrollX = document.documentElement.dataset.scrollX || 0;
            var scrollY = document.documentElement.dataset.scrollY || 0;
            window.scrollTo(scrollX, scrollY);
        });
    }

    function generate() {
        window.URL = window.URL || window.webkitURL;
        window.open(window.URL.createObjectURL(screenshotPage()));
    }
    exports.screenshotPage = screenshotPage;
    exports.generate = generate;
})(window);

you can find a demo here

What exactly does this code accomplish? You do not get an image of the web page, do you? — Jānis Elmeris, Nov 17 '16 at 13:00
@JānisElmeris , I didn't try but this code can help you to download generated blob : https://gist.github.com/nolanlawson/0eac306e4dac2114c752 — Eray, Oct 26 '17 at 08:13
the code did work for me, you can check the demo if ur not willing to test it, @Eray thanks, that might be helpful — Med Abida, Oct 26 '17 at 08:17
Please note that uBlock (and maybe other ad blockers) blocks the demo for some reason. If disabled, the button "generate screenshot" will copy the page's content, create an URL from it, and display the content in a new browser window/tab. It's not actually a screenshot but rather an option to express the content of the page as URL. Let's call it a fake ;) — BurninLeo, Jun 29 '19 at 19:49
@MedAbida this is nothing near to screen shot ... no image output..... — kunal verma, Sep 23 '19 at 07:06

score 1 · Accepted Answer · answered Dec 14 '15 at 17:03

1

Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...

For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.

You should try url2png

answered Dec 14 '15 at 17:03

Giacomo Torricelli

723
6
20

Does not works on websites that requires login .... – Diego Favero Jun 17 '20 at 23:31

how to capture screenshot in html using js or jquery

3 Answers3

Linked