Javascript 如何使用 js 或 jquery 在 html 中捕获屏幕截图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34272274/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to capture screenshot in html using js or jquery
提问by divelner
I'm need my clients be able to capture screenshot of any page of my website using button like this:
我需要我的客户能够使用这样的按钮捕获我网站任何页面的屏幕截图：
<button>Take screenshot</button>I tried to use html2canvas but it's doesn't work properly for me because i have iframe's in my website and it's cause some session problems.
我尝试使用 html2canvas 但它对我来说不能正常工作，因为我的网站中有 iframe 并且它会导致一些会话问题。
someone have solution for this?
有人对此有解决方案吗？
i looked all over google and didn't found something that's helps me much.
我查遍了谷歌，没有找到对我有很大帮助的东西。
采纳答案by Giacomo Torricelli
Web pages are not the best things to be "screenshoted", because of their nature; they can include async elements, frames or something like that, they are usually responsive etc...
网页不是最好的“截图”，因为它们的性质；它们可以包括异步元素、框架或类似的东西，它们通常是响应式的等等......
For your purpose the best way is to use external api or an external service, I think is not a good idea to try doing that with JS.
为了您的目的，最好的方法是使用外部 api 或外部服务，我认为尝试使用 JS 这样做不是一个好主意。
You should try url2png
你应该试试url2png
回答by Itay Grudev
Look at the html2canvasproject. Their approach is that they create a representation of the page inside a canvas. They don't make an actual screenshot, but builds it based on the content on the page and the loaded stylesheet. It could be used on the entire bodyor just a specific element.
查看html2canvas项目。他们的方法是在画布内创建页面的表示。他们不制作实际的屏幕截图，而是根据页面上的内容和加载的样式表构建它。它可以用于整个body元素或仅用于特定元素。
It is also really easy to use. Here is an example:
它也很容易使用。下面是一个例子：
html2canvas(document.body, {
onrendered: function(canvas) {
document.body.appendChild(canvas);
}
});
You can adapt it to your code relatively easy.
您可以相对容易地将其调整到您的代码中。
Take a look at their demo. Click on any of the buttons and then scroll to the bottom of the page.
看看他们的演示。单击任何按钮，然后滚动到页面底部。
回答by Med Abida
you can use HTML5 and JavaScriptthis is a sample code that worked for me.
你可以使用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);
you can find a demo here
你可以在这里找到一个演示
