你如何截取一个angularjs应用程序的截图?
我试过了:
- 节点webshot
- phantomjs
我可以在本地做,但我不能截取基于angularjs的其他网站的截图。
赏金
能够截取页面上包含jquery和angular的任何angularjs应用程序的截图。 这里的每一个网站: http : //builtwith.angularjs.org/应该看起来像我在我的浏览器中加载它。
必须能够通过terminal获取屏幕截图,以便可以像工作人员或其他人一样在后台进程中运行。
一个随机的服务器(或任何应该能够去异地的网站,并截图。)
它只需要一个URL,将不可避免地托pipe一个angularjs应用程序,并输出你期望在浏览器中看到的。
不需要是phantomjs或node-webshot。
更新1
截至昨晚,这是我如何做到这一点。
- node-webkit(铬中的nodejs)编译成linux-32
- 随机的笔记本电脑上打开
- 当它检测到截图需要采取(通过火力点暂时)它打开一个iframe与该url
- 等待10秒(合理时间加载网站/应用程序)
- 使用node-webkit api来自己截图
我有一些工作要做这个解决scheme。
更新2
这似乎是一个潜在的解决scheme,但我发现这些解决scheme大多需要打开一个浏览器,并采取屏幕截图像一个像phantomjs的无头浏览器。
- http://browsershots.org/documentation#HowToCreateANewScreenshotFactory
- Browserstack.com
更新3
我正在继续在github上为这个产品准备好的解决scheme进行开发。 https://github.com/clouddueling/angular-snapshot
如果您使用此代码并使用node-webkit.app构build它,则可以运行截图服务器。
使用浏览器在所有浏览器中testing您的应用程序,而无需安装每个浏览器,包括移动浏览器,不同的手机,平板电脑等。
有对Selenium自动化testing和截图的支持 。 支持本地testing ,不需要公共URL。
屏幕截图API可用于configuration您需要的屏幕截图, Screenshooter是从命令行生成BrowserStack屏幕截图的工具。
这是一个试用期,因为这是一个商业产品,但它制作得很好,值得每一分钱。 您只能订阅一个月。 我个人使用,我强烈推荐它。
你有没有尝试过wkhtmltopdf ? 它带有一个名为wkhtmltoimage的工具。 它使用QtWebKit(WebKit渲染引擎的Qt端口)来渲染网页,并将结果转换为您select的PDF或图像格式,全部在服务器端完成。
因为它使用WebKit,它就像现代浏览器一样呈现一切(图像,CSS,甚至JavaScript)。 您可以微调参数,例如调整JavaScript执行宽限期。
在我的用例中,结果非常令人满意,几乎与浏览器渲染的结果完全相同。
这是一个命令选项列表:
Name: wkhtmltoimage 0.11.0 rc2 Synopsis: wkhtmltoimage [OPTIONS]... <input file> <output file> Description: Converts an HTML page into an image, General Options: --allow <path> Allow the file or files from the specified folder to be loaded (repeatable) --checkbox-checked-svg <path> Use this SVG file when rendering checked checkboxes --checkbox-svg <path> Use this SVG file when rendering unchecked checkboxes --cookie <name> <value> Set an additional cookie (repeatable) --cookie-jar <path> Read and write cookies from and to the supplied cookie jar file --crop-h <int> Set height for croping --crop-w <int> Set width for croping --crop-x <int> Set x coordinate for croping --crop-y <int> Set y coordinate for croping --custom-header <name> <value> Set an additional HTTP header (repeatable) --custom-header-propagation Add HTTP headers specified by --custom-header for each resource request. --no-custom-header-propagation Do not add HTTP headers specified by --custom-header for each resource request. --debug-javascript Show javascript debugging output --no-debug-javascript Do not show javascript debugging output (default) --encoding <encoding> Set the default text encoding, for input -H, --extended-help Display more extensive help, detailing less common command switches -f, --format <format> Output file format --height <int> Set screen height (default is calculated from page content) (default 0) -h, --help Display help --htmldoc Output program html help --images Do load or print images (default) --no-images Do not load or print images -n, --disable-javascript Do not allow web pages to run javascript --enable-javascript Do allow web pages to run javascript (default) --javascript-delay <msec> Wait some milliseconds for javascript finish (default 200) --load-error-handling <handler> Specify how to handle pages that fail to load: abort, ignore or skip (default abort) --disable-local-file-access Do not allowed conversion of a local file to read in other local files, unless explecitily allowed with --allow --enable-local-file-access Allowed conversion of a local file to read in other local files. (default) --manpage Output program man page --minimum-font-size <int> Minimum font size --password <password> HTTP Authentication password --disable-plugins Disable installed plugins (default) --enable-plugins Enable installed plugins (plugins will likely not work) --post <name> <value> Add an additional post field (repeatable) --post-file <name> <path> Post an additional file (repeatable) -p, --proxy <proxy> Use a proxy --quality <int> Output image quality (between 0 and 100) (default 94) --radiobutton-checked-svg <path> Use this SVG file when rendering checked radiobuttons --radiobutton-svg <path> Use this SVG file when rendering unchecked radiobuttons --readme Output program readme --run-script <js> Run this additional javascript after the page is done loading (repeatable) --disable-smart-width Use the specified width even if it is not large enough for the content --enable-smart-width Extend --width to fit unbreakable content (default) --stop-slow-scripts Stop slow running javascripts (default) --no-stop-slow-scripts Do not Stop slow running javascripts --transparent Make the background transparent in pngs --user-style-sheet <url> Specify a user style sheet, to load with every page --username <username> HTTP Authentication username -V, --version Output version information an exit --width <int> Set screen width, note that this is used only as a guide line. Use --disable-smart-width to make it strict. (default 1024) --window-status <windowStatus> Wait until window.status is equal to this string before rendering page --zoom <float> Use this zoom factor (default 1) Specifying A Proxy: By default proxy information will be read from the environment variables: proxy, all_proxy and http_proxy, proxy options can also by specified with the -p switch <type> := "http://" | "socks5://" <serif> := <username> (":" <password>)? "@" <proxy> := "None" | <type>? <sering>? <host> (":" <port>)? Here are some examples (In case you are unfamiliar with the BNF): http://user:password@myproxyserver:8080 socks5://myproxyserver None Contact: If you experience bugs or want to request new features please visit <http://code.google.com/p/wkhtmltopdf/issues/list>, if you have any problems or comments please feel free to contact me: <uuf6429@gmail.com>
虽然没有亲自尝试过,但是我看到服务部署在使用Selenium的Webdriver截图的生产环境中。
- build立seleniumWebdriver https://code.google.com/p/selenium/
- 使用RESTful API与服务器通信。 有特定的调用,您可以发出请求来获取网站,并截取当前的实例
一切都在后台完成,所以我认为它符合你的要求。
也许这将有助于https://bitbucket.org/vodolaz095/site-shooter这是nodejs + phantomjs应用程序,使网站截图
您需要一个heroku免费套餐服务来执行此操作。
顺便说一句,你可以尝试这个应用程序 – https://pageshooter.herokuapp.com我认为它可以使angularjs网站的截图
Node-Webshot使用PhantomJS,后者使用QtWebkit,而不能与AngularJS一起使用。
更多信息: https : //github.com/angular/angular.js/issues/2985
build议。 确保Node-Webshot中绑定的PhantomJS绝对是最新版本。 如果没有,用最新的版本replacePhantomJS,猎物现在已经修好了。
如果你有权访问PhantomJS的命令行选项,你可以在这里尝试一些: https : //github.com/ariya/phantomjs/wiki/API-Reference
特别是钟声的人是:
– 忽略SSL的错误=真
–local到远程-URL的访问=真
–web安全=假