cómo capturar una captura de pantalla en html usando js o jquery

Necesito que mis clientes puedan capturar capturas de pantalla de cualquier página de mi sitio web usando un botón como este:

Traté de usar html2canvas, pero no funciona bien para mí porque tengo iframe en mi sitio web y es causa de algunos problemas de sesión.

alguien tiene una solución para esto?

Busqué en todo google y no encontré algo que me sirva de mucho.

    Las páginas web no son las mejores cosas para ser “capturadas”, debido a su naturaleza; pueden incluir elementos asincrónicos, marcos o algo así, generalmente responden, etc.

    Para su propósito, la mejor manera es utilizar una API externa o un servicio externo, creo que no es una buena idea intentar hacer eso con JS.

    Deberías probar url2png

    puede usar HTML5 and JavaScript este es un código de muestra que funcionó para mí.

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

    puedes encontrar una demo aquí

    Mira el proyecto html2canvas . Su enfoque es que crean una representación de la página dentro de un canvas. No hacen una captura de pantalla real, sino que la crean en función del contenido de la página y la hoja de estilo cargada. Podría usarse en todo el body o solo en un elemento específico.

    También es realmente fácil de usar. Aquí hay un ejemplo:

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

    Puedes adaptarlo a tu código de manera relativamente fácil.

    Echa un vistazo a su demo . Haga clic en cualquiera de los botones y luego desplácese hasta la parte inferior de la página.