Take Webpage Screenshot with HTML5 and JavaScript

  • Avinash
  • 17
  • Oct 19, 2012
  • Tutorial

Here I come with the one quick tip related to HTML5 and JavaScript. This is about to take webpage screenshot using HTML5 and JavaScript code only. Yes you have read it correct its using HTML5 and JavaScript only. :)

Without wasting much time let’s have a look at code and yes working example for sure.

(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);
(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);

Demo

I have created a demo page for above code so you can see that in action. Live Example.

I left this article open for discussion, so it would be great if you post your views, comments, suggestion via comment form below.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • cristine

    As usual you have posted with a few extremely intriguing elements and also
    I have already added this web-site to one I’ll pay attention to ! ! !

  • tommie

    Hi colleagues, its great article regarding cultureand completely defined, keep it up all the time.

  • alif

    nice one sir

  • Guest

    and how would i save it as a real graphic?

  • viral

    Avinash sir
    this good article
    so pls tell me how to save this snapshot in image in c#

  • Rido

    Heyyy, I would like to use this code but the example is not working and I have some questions. Would you reupload the example? Very thank you

  • KoffeeBean

    Nifty. But what’s the point if one can’t save the image or do anything with it except seeing it in another tab? I am curious to learn more about what you did there though.

  • Mummy Ninja

    Will this work in an iframe? I want to use this in a Google Maps iframe to automatically get a snapshot of the map. :(

    • vishal shori

      if you want to take snap shot of google map..use html2canvas and while using that make “userCors: True” this will convert your google map into dataurl and you can save it as image

  • http://www.techwila.com/ Divy Singh Rathore

    Avinash sir can you tell how to take snapshot remote website without opening it?

  • http://www.xpertdeveloper.com/ Avinash

    Its up now, thanks for pointing…

    • Malik Jehangir Riaz

      Hi avinash;
      is there a way to get the blob inside an image control ?

  • Amandine

    i tried the code, but me i don’t get any img or css…. any idea why?

    • http://www.xpertdeveloper.com/ Avinash

      Do you have link available to review?

  • gaynorvader

    All this does in your example is open the code in a new tab. No screenshot is taken. Am I missing something?

  • Muthu

    please say the method to save the image

  • http://georgeslangeard.com Georges Langeard

    Have you found a solution to save the resulting image ? Thanks a lot anyway..