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