JavaScript

Generate Screenshot Using HTML and JavaScript

Introduction

Generate a screenshot using HTML and JavaScript, yeah that is what I meant. I was just searching for some unanswered article here, one member was asking about this, so I thought I would write a tip about that. Here it is, you can see the actual article reference here.

Procedure

Step 1

You need an HTML page with some JavaScript code andCSS. That's all we need.

Create an HTML file just like this:

  1. <html lang="en">  
  2. <head>  
  3.     <title>Take Web Page Screenshot with HTML5 and JavaScript </title>  
  4. </head>  
  5. <body>  
  6.     <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate  
  7.         Screenshot »</a>      
  8. </body>  
  9. </html>  

Step 2

If you want, you can create some styles and apply them.

Now it's time to create the JavaScript function generate() that I specified in an <a> tag.

  1. <script type="text/javascript">  
  2.         (function (exports) {  
  3.             function urlsToAbsolute(nodeList) {  
  4.                 if (!nodeList.length) {  
  5.                     return [];  
  6.                 }  
  7.                 var attrName = 'href';  
  8.                 if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__proto__ ===       
  9.                  HTMLScriptElement.prototype) {  
  10.                     attrName = 'src';  
  11.                 }  
  12.                 nodeList = [].map.call(nodeList, function (el, i) {  
  13.                     var attr = el.getAttribute(attrName);  
  14.                     if (!attr) {  
  15.                         return;  
  16.                     }  
  17.                     var absURL = /^(https?|data):/i.test(attr);  
  18.                     if (absURL) {  
  19.                         return el;  
  20.                     } else {  
  21.                         return el;  
  22.                     }  
  23.                 });  
  24.                 return nodeList;  
  25.             }  
  26.   
  27.             function screenshotPage() {  
  28.                 urlsToAbsolute(document.images);  
  29.                 urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));  
  30.                 var screenshot = document.documentElement.cloneNode(true);  
  31.                 var b = document.createElement('base');  
  32.                 b.href = document.location.protocol + '//' + location.host;  
  33.                 var head = screenshot.querySelector('head');  
  34.                 head.insertBefore(b, head.firstChild);  
  35.                 screenshot.style.pointerEvents = 'none';  
  36.                 screenshot.style.overflow = 'hidden';  
  37.                 screenshot.style.webkitUserSelect = 'none';  
  38.                 screenshot.style.mozUserSelect = 'none';  
  39.                 screenshot.style.msUserSelect = 'none';  
  40.                 screenshot.style.oUserSelect = 'none';  
  41.                 screenshot.style.userSelect = 'none';  
  42.                 screenshot.dataset.scrollX = window.scrollX;  
  43.                 screenshot.dataset.scrollY = window.scrollY;  
  44.                 var script = document.createElement('script');  
  45.                 script.textContent = '(' + addOnPageLoad_.toString() + ')();';  
  46.                 screenshot.querySelector('body').appendChild(script);  
  47.                 var blob = new Blob([screenshot.outerHTML], {  
  48.                     type: 'text/html'  
  49.                 });  
  50.                 return blob;  
  51.             }  
  52.   
  53.             function addOnPageLoad_() {  
  54.                 window.addEventListener('DOMContentLoaded', function (e) {  
  55.                     var scrollX = document.documentElement.dataset.scrollX || 0;  
  56.                     var scrollY = document.documentElement.dataset.scrollY || 0;  
  57.                     window.scrollTo(scrollX, scrollY);  
  58.                 });  
  59.             }  
  60.   
  61.             function generate() {  
  62.                 window.URL = window.URL || window.webkitURL;  
  63.                 window.open(window.URL.createObjectURL(screenshotPage()));  
  64.             }  
  65.             exports.screenshotPage = screenshotPage;  
  66.             exports.generate = generate;  
  67.         })(window);  
  68.     </script>  
Complete Code

Screenshot.html
  1. <html lang="en">  
  2. <head>  
  3.     <title>Take Web Page Screenshot with HTML5 and JavaScript </title>  
  4. </head>  
  5. <body>  
  6.     <a class="btn btn-success" href="javascript:void(0);" onclick="generate();">Generate  
  7.         Screenshot »</a>  
  8.     <script type="text/javascript">  
  9.         (function (exports) {  
  10.             function urlsToAbsolute(nodeList) {  
  11.                 if (!nodeList.length) {  
  12.                     return [];  
  13.                 }  
  14.                 var attrName = 'href';  
  15.                 if (nodeList[0].__proto__ === HTMLImageElement.prototype || nodeList[0].__p                   roto__ === HTMLScriptElement.prototype) {  
  16.                     attrName = 'src';  
  17.                 }  
  18.                 nodeList = [].map.call(nodeList, function (el, i) {  
  19.                     var attr = el.getAttribute(attrName);  
  20.                     if (!attr) {  
  21.                         return;  
  22.                     }  
  23.                     var absURL = /^(https?|data):/i.test(attr);  
  24.                     if (absURL) {  
  25.                         return el;  
  26.                     } else {  
  27.                         return el;  
  28.                     }  
  29.                 });  
  30.                 return nodeList;  
  31.             }  
  32.   
  33.             function screenshotPage() {  
  34.                 urlsToAbsolute(document.images);  
  35.                 urlsToAbsolute(document.querySelectorAll("link[rel='stylesheet']"));  
  36.                 var screenshot = document.documentElement.cloneNode(true);  
  37.                 var b = document.createElement('base');  
  38.                 b.href = document.location.protocol + '//' + location.host;  
  39.                 var head = screenshot.querySelector('head');  
  40.                 head.insertBefore(b, head.firstChild);  
  41.                 screenshot.style.pointerEvents = 'none';  
  42.                 screenshot.style.overflow = 'hidden';  
  43.                 screenshot.style.webkitUserSelect = 'none';  
  44.                 screenshot.style.mozUserSelect = 'none';  
  45.                 screenshot.style.msUserSelect = 'none';  
  46.                 screenshot.style.oUserSelect = 'none';  
  47.                 screenshot.style.userSelect = 'none';  
  48.                 screenshot.dataset.scrollX = window.scrollX;  
  49.                 screenshot.dataset.scrollY = window.scrollY;  
  50.                 var script = document.createElement('script');  
  51.                 script.textContent = '(' + addOnPageLoad_.toString() + ')();';  
  52.                 screenshot.querySelector('body').appendChild(script);  
  53.                 var blob = new Blob([screenshot.outerHTML], {  
  54.                     type: 'text/html'  
  55.                 });  
  56.                 return blob;  
  57.             }  
  58.   
  59.             function addOnPageLoad_() {  
  60.                 window.addEventListener('DOMContentLoaded', function (e) {  
  61.                     var scrollX = document.documentElement.dataset.scrollX || 0;  
  62.                     var scrollY = document.documentElement.dataset.scrollY || 0;  
  63.                     window.scrollTo(scrollX, scrollY);  
  64.                 });  
  65.             }  
  66.   
  67.             function generate() {  
  68.                 window.URL = window.URL || window.webkitURL;  
  69.                 window.open(window.URL.createObjectURL(screenshotPage()));  
  70.             }  
  71.             exports.screenshotPage = screenshotPage;  
  72.             exports.generate = generate;  
  73.         })(window);  
  74.     </script>  
  75. </body>  
  76. </html>  

 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs