Generate and Download Screenshot of webpage without lossing the styles

Question

I want to Generate and Download Screenshot of webpage without lossing the styles. I have a web page .In that web page i have a download button . When user click on download button then the screen shot of entire Page need to download as image in user computer . How can i do this ?

Please check my code

Index.html

<html>
 <body>
 <link href="style.css" rel="stylesheet">
 <h1>Scrrenshot</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>  
  <input type="submit" value="Submit" id="input-submit">
</form>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

</body>



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

</script>

</html>

style.css

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;

*, 
*:before, 
*:after {
   @include box-sizing(border-box); 
}

html, body {
  background: #f1f1f1;
  font-family: 'Merriweather', sans-serif;
  padding: 1em;
}

h1 {
   text-align: center;
   color: #a8a8a8;
   @include text-shadow(1px 1px 0 rgba(white, 1));
}

form {
     border: 2px solid blue;
    margin: 20px auto;
    max-width: 600px;
    padding: 5px;
    text-align: center;

}

  input, textarea {
     border:0; outline:0;
     padding: 1em;
     @include border-radius(8px);
     display: block;
     width: 100%;
     margin-top: 1em;
     font-family: 'Merriweather', sans-serif;
     @include box-shadow(0 1px 1px rgba(black, 0.1));
     resize: none;

    &:focus {
       @include box-shadow(0 0px 2px rgba($red, 1)!important);
    }
  }

  #input-submit {
     color: white; 
     background: $red;
     cursor: pointer;

    &:hover {
       @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6)); 
    }
  }

  textarea {
      height: 126px;
  }
}


.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right { width: 50%; }

.left {
     margin-right: 2%; 
}


@media (max-width: 480px) {
  .half {
     width: 100%; 
     float: none;
     margin-bottom: 0; 
  }
}


/* Clearfix */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.half.left.cf > input {
    margin: 5px;
}

For this i used the method [http://www.xpertdeveloper.com/2012/10/webpage-screenshot-with-html5-js/] , here screenshot is generated but without style also it is not downloading . Please help , is there any jQuery library available for this?

score 7 · Accepted Answer · answered Jun 12 '17 at 08:52

You can achieve this using the following JavaScript libraries ...

html2canvas ( for taking screenshot of webpage )
FileSave.js ( for downloading the screenshot as an image )

ᴅᴇᴍᴏ

(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() {
        var wrapper = document.getElementById('wrapper');
        html2canvas(wrapper, {
            onrendered: function(canvas) {
                canvas.toBlob(function(blob) {
                    saveAs(blob, 'myScreenshot.png');
                });
            }
        });
    }

    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() {
        screenshotPage();
    }
    exports.screenshotPage = screenshotPage;
    exports.generate = generate;
})(window);

@import url(https://fonts.googleapis.com/css?family=Merriweather);
$red: #e74c3c;
*,
*:before,
*:after {
    @include box-sizing(border-box);
}

html,
body {
    background: #f1f1f1;
    font-family: 'Merriweather', sans-serif;
    padding: 1em;
}

h1 {
    text-align: center;
    color: #a8a8a8;
    @include text-shadow(1px 1px 0 rgba(white, 1));
}

form {
    border: 2px solid blue;
    margin: 20px auto;
    max-width: 600px;
    padding: 5px;
    text-align: center;
}

input,
textarea {
    border: 0;
    outline: 0;
    padding: 1em;
    @include border-radius(8px);
    display: block;
    width: 100%;
    margin-top: 1em;
    font-family: 'Merriweather', sans-serif;
    @include box-shadow(0 1px 1px rgba(black, 0.1));
    resize: none;
    &:focus {
        @include box-shadow(0 0px 2px rgba($red, 1)!important);
    }
}

#input-submit {
    color: white;
    background: $red;
    cursor: pointer;
    &:hover {
        @include box-shadow(0 1px 1px 1px rgba(#aaa, 0.6));
    }
}

textarea {
    height: 126px;
}


}
.half {
    float: left;
    width: 48%;
    margin-bottom: 1em;
}
.right {
    width: 50%;
}
.left {
    margin-right: 2%;
}
@media (max-width: 480px) {
    .half {
        width: 100%;
        float: none;
        margin-bottom: 0;
    }
}

/* Clearfix */
.cf:before,
.cf:after {
    content: " ";
    /* 1 */
    
    display: table;
    /* 2 */
}
.cf:after {
    clear: both;
}
.half.left.cf > input {
    margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="wrapper">
    <h1>Scrrenshot</h1>
    <form class="cf">
        <div class="half left cf">
            <input type="text" id="input-name" placeholder="Name">
            <input type="email" id="input-email" placeholder="Email address">
            <input type="text" id="input-subject" placeholder="Subject">
        </div>
        <div class="half right cf">
            <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
        </div>
        <input type="submit" value="Submit" id="input-submit">
    </form>
</div>
<a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate Screenshot »</a>

This is great !!! .It is working . Friend , we can increase the quality of image that we are downloading? .Currently the clarity of image is less . — Abilash Erikson, Jun 12 '17 at 09:21

maltem-za · Answer 2 · 2018-03-26T15:49:35.570

2

I found that dom-to-image did a much better job than html2canvas. See the following question & answer: https://stackoverflow.com/a/32776834/207981

If you're looking to download the image(s) you'll want to combine it with FileSaver.js (already mentioned here), and if you want to download a zip with multiple image files all generated client-side take a look at jszip.

edited Mar 26 '18 at 15:49

answered Mar 26 '18 at 15:17

maltem-za

1,225
2
16
23

dom-to-image renders css transformations better than html2canvas – Raghavendra N Feb 02 '22 at 05:35

score -4 · Answer 3 · answered Jun 12 '17 at 08:24

Few options for this either use this

<html>
<head>
<title> Download-Button </title>
</head>
<body>
<p> Click the image ! You can download! </p>
<a download="logo.png" href="http://localhost/folder/img/logo.png" title="Logo title">
<img alt="logo" src="http://localhost/folder/img/logo.png">
</a>
</body>
</html>

or You can use Mordernizr

or maybe this works

<a href="/path/to/image" download>
    <img src="/path/to/image" />
 </a>

refer to this link aswell [1] http://www.w3schools.com/tags/att_a_download.asp

Sorry but this solution totally misses the point of the post. Nothing in it shows how to capture a screenshot of the browser window and save it. — Stevko, Jun 13 '17 at 18:45

Generate and Download Screenshot of webpage without lossing the styles

3 Answers3

Linked

Related