web-dev-qa-db-ja.com

jsまたはjqueryを使用してHTMLでスクリーンショットをキャプチャする方法

次のようなボタンを使用して、クライアントが私のウェブサイトの任意のページのスクリーンショットをキャプチャできる必要があります。

<button>Take screenshot</button>

Html2canvasを使用しようとしましたが、Webサイトにiframeがあり、セッションの問題が発生するため、正しく機能しません。

誰かがこれに対する解決策を持っていますか？

私はグーグル全体を見たが、私に大いに役立つ何かを見つけられなかった。

javascriptjqueryhtmlhtml2canvaswebpage-screenshot
7
divelner

HTML5 and JavaScriptを使用できます。これは私のために機能したサンプルコードです。

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

デモを見つけることができます こちら

7
Med Abida

html2canvas プロジェクトを見てください。彼らのアプローチは、キャ​​ンバス内にページの表現を作成することです。実際のスクリーンショットは作成しませんが、ページのコンテンツとロードしたスタイルシートに基づいて作成します。 body全体または特定の要素でのみ使用できます。

使い方もとても簡単です。以下に例を示します。

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

比較的簡単にコードに適合させることができます。

デモ を見てください。いずれかのボタンをクリックしてから、ページの下部までスクロールします。

5
Itay Grudev