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

Answer 1

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;
}

    
Scrrenshot
    

        

            
            
            
        
        

            
        
        
    

Generate Screenshot »