web-dev-qa-db-fra.com

comment capturer une capture d'écran en html en utilisant js ou jquery

J'ai besoin que mes clients puissent capturer une capture d'écran de n'importe quelle page de mon site Web en utilisant un bouton comme celui-ci:

<button>Take screenshot</button>

J'ai essayé d'utiliser html2canvas mais cela ne fonctionne pas correctement pour moi car j'ai des iframes sur mon site Web et cela cause des problèmes de session.

quelqu'un a une solution pour cela?

j'ai regardé partout sur Google et je n'ai pas trouvé quelque chose qui m'aide beaucoup.

javascriptjqueryhtmlhtml2canvaswebpage-screenshot
7
divelner

vous pouvez utiliser HTML5 and JavaScript ceci est un exemple de code qui a fonctionné pour moi.

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

vous pouvez trouver une démo ici

7
Med Abida

Regardez le projet html2canvas . Leur approche consiste à créer une représentation de la page à l'intérieur d'une toile. Ils ne font pas de capture d'écran réelle, mais la construisent en fonction du contenu de la page et de la feuille de style chargée. Il pourrait être utilisé sur l'ensemble du body ou simplement sur un élément spécifique.

Il est également très simple à utiliser. Voici un exemple:

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

Vous pouvez l'adapter à votre code relativement facilement.

Jetez un oeil à leur démo . Cliquez sur l'un des boutons, puis faites défiler jusqu'au bas de la page.

5
Itay Grudev