How to capture screenshot in html using js or jquery

Question

I need my clients to be able to take a screenshot from any page of my website using this button:

<button>Take screenshot</button> 

I tried using html2canvas, but it doesn’t work properly for me, because I have an iframe on my website and this causes some session problems.

Does anyone have a solution for this?

I looked at Google and did not find what helps me a lot.

Answer 1

Web pages are not the best things that can be “taken screenshots” because of their nature; they may include asynchronous elements, frames, or something like that, they usually respond, etc.

For your purpose, the best way is to use an external api or external service, I think you should not try to do this with JS.

You should try url2png

Answer 2

you can use HTML5 and JavaScript is an example of code that worked for me.

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

you can find a demo here

Answer 3

Take a look at the html2canvas project. Their approach is to create a page view inside the canvas. They do not take the actual screenshot, but build it based on the content on the page and the loaded stylesheet. It can be used for the whole body or only for a specific element.

It is also very easy to use. Here is an example:

 html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } }); 

You can easily adapt it to your code.

Take a look at the demo. Click on any of the buttons, and then scroll to the end.