如何使用js或jquery捕获html中的屏幕截图

Question

我需要我的客户能够使用这样的按钮捕获我网站任何页面的屏幕截图:

<button>Take screenshot</button>

我试图使用html2canvas,但它对我来说不能正常工作,因为我的网站上有iframe,这会引起一些会话问题.

有人有解决方案吗？

我看着谷歌,并没有找到一些对我有帮助的东西.

Answer 1

您可以使用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);

你可以在这里找到一个演示

Answer 2

查看html2canvas项目。他们的方法是在画布内创建页面的表示形式。他们没有制作实际的屏幕截图，而是根据页面上的内容和加载的样式表进行构建。它可以用于整个body元素或仅用于特定元素。

它也真的很容易使用。这是一个例子：

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

您可以相对轻松地使其适应您的代码。

看看他们的演示。单击任何按钮，然后滚动到页面底部。

Answer 3

由于其本质，网页并不是最好的“截屏”对象；它们可以包含异步元素、框架或类似的东西，它们通常是响应式的等等......

出于您的目的，最好的方法是使用外部 api 或外部服务，我认为尝试使用 JS 来做到这一点并不是一个好主意。

你应该尝试url2png