Post
Ask Question

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 and CSS. 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.                 windowwindow.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>   


Similar Articles