如何使用 Javascript 截取网页的屏幕截图

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/21632197/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 21:22:26  来源:igfitidea点击:

How to take a screenshot of a web page by using Javascript

javascripthtmlcanvasscreenshot

提问by Brank

I need to capture the currently active web page as a screenshot. I've already tried html2canvas & GrabzIt but the problem is that I need a precise screenshot of the page I am on currently. The reason why I don't want to use html2canvas is because it does not always return a good version of a screenshot (not rendering properly) and I don't want to use GrabzIt because it's not free.

我需要捕获当前活动的网页作为屏幕截图。我已经尝试过 html2canvas 和 GrabzIt,但问题是我需要当前所在页面的精确屏幕截图。我不想使用 html2canvas 的原因是因为它并不总是返回一个好的屏幕截图版本(不能正确渲染),我不想使用 GrabzIt,因为它不是免费的。

Do any of you have an idea how to accomplish this either by using javascript/java/flash? Any option will do as long as it works...

你们有没有人知道如何通过使用 javascript/java/flash 来实现这一点?任何选项都可以,只要它有效......

P.S. I'm currently capturing screenshots with my addon for Firefox by using the function that firefox offers : context.drawWindow and now i want to make it available online.

PS我目前正在使用Firefox提供的功能使用我的Firefox插件捕获屏幕截图:context.drawWindow,现在我想让它在线可用。

Thanks a lot!

非常感谢!

采纳答案by Brank

In the end, I ended up using server side generation of screenshots with phantomjs. Found it the most reliable in my scenario and it takes pretty decent screenshots.

最后,我最终使用phantomjs使用服务器端生成屏幕截图。发现它在我的场景中最可靠,并且需要相当不错的屏幕截图。

回答by Blauharley

Currently possible alternatives:

目前可能的替代方案:

rasterizeHTML.js:

光栅化HTML.js:

this tool looks to be capable to capture a while page containing sophisticated html-structure and an image as well in this demo: http://cburgmer.github.io/rasterizeHTML.js/

这个工具看起来能够在这个演示中捕获包含复杂的 html 结构和图像的页面:http: //cburgmer.github.io/rasterizeHTML.js/

Lively 3D:

生动的3D:

On the tool's website you can find a demo as well and it is still supported and developed.

在该工具的网站上,您也可以找到一个演示,它仍然受到支持和开发。

http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html

http://livelygoes3d.blogspot.co.at/2011/11/rendering-html-on-canvas.html

HTML2Canvas:

HTML2Canvas:

Or after all HTML2Canvas because it does not look like that it is put on hold, quite the opposite there is a new release-version of it. And since I used it it might be handle rendering images onto a canvas better.

或者毕竟 HTML2Canvas 因为它看起来不像被搁置,恰恰相反,它有一个新的发布版本。由于我使用了它,它可能可以更好地将图像渲染到画布上。

https://html2canvas.hertzen.com

https://html2canvas.hertzen.com

Old-Answer: I used this package in one of my projects and it worked pretty well. The only complain I have to make on this package is that images are not rendered that well in the final screenshot. But may be it's improved since then.

旧答案:我在我的一个项目中使用了这个包,它运行得很好。我必须对这个包提出的唯一抱怨是图像在最终屏幕截图中没有很好地呈现。但可能从那以后它有所改善。