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

Question

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

<button>Take screenshot</button>

我尝试使用 html2canvas，但它对我来说不能正常工作，因为我的网站中有 iframe，它会导致一些会话问题。

有人对此有解决方案吗？

我找遍了 google，没有找到对我有很大帮助的东西。

Answer 1

网页并不是最好的东西 "screenshoted"，因为它们的性质；它们可以包含异步元素、框架或类似的东西，它们通常是响应式的等等...

为了您的目的，最好的方法是使用外部 api 或外部服务，我认为尝试使用 JS 执行此操作不是一个好主意。

你应该试试url2png

Answer 2

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

你可以找到一个演示 here

Answer 3

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

它也很好用。这是一个例子：

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

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

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

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

how to capture screenshot in html using js or jquery

html

javascript

jquery

webpage-screenshot

html2canvas