Question

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

＆＃13;

<button>Take screenshot</button>

＆＃13;

我尝试使用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);

您可以找到演示here

Answer 2

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

它也非常容易使用。这是一个例子：

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

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

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

Answer 3

由于其性质，网页不是“截图”的最佳选择;它们可以包括异步元素，框架或类似的东西，它们通常是响应性的等等......

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

您应该尝试url2png

如何使用js或jquery

3 个答案: