js中怎么调用windows的截屏工具

JavaScript09

js中怎么调用windows的截屏工具,第1张

一.工具

windows自带的画图软件:mspaint.exe

windows自带的截图软件:SnippingTool.exe

二,方法(一):

使用快捷键PrtSc、Alt+PrtSc

1.敲击键盘上的”PrtSc“键可以实现截取全屏的功能,截取的屏幕图片将被保存到剪贴板中。可以在word文档、QQ等窗口通过"Ctrl+v"将其粘贴出来使用。

.2当只要截取窗口时,只需要按键盘上的Alt+PrtSc键,系统自动会截取当前最前面的窗口到剪贴板中,也可以在word文档、QQ等窗口通过"Ctrl+v"将其粘贴出来。

3.如果要将截取的屏幕和窗口单独作为一个图片文件保存,可以粘贴到word文档后对图片点击右键,选择“另存为图片”后保存到桌面即可。4.另外一个将截屏保存为图片文件的方法是使用windows自带的画图软件。打开软件后点击”粘贴“,截屏就从剪贴板粘贴到画图软件中。刚被粘贴上去的图片边缘有一圈蚂蚁线,代表图片此时被选中,点击裁剪后图片周围的白色背景就被去掉了,此时将图片保存到自己指定的路径即可。

方法(二):

使用windows自带的截图工具,完整的win7系统有自己自带的截图软件SnippingTool.exe,软件小巧且功能强大。可以从”C:\Windows\System32“将之找出来,将快捷方式发送到桌面方便以后使用。部分ghost系统有可能将这个软件精简掉了,对此可以在网上下载一个来使用。打开软件后,点击”新建“拖动鼠标选择要截图的区域,截图成功后保存即可。

使用node-webshot进行网页截图

用到的npm模块有yargs和node-webshot,关于yargs的文章参考这里 从零开始打造个人专属命令行工具集——yargs完全指南 。

node-webshot是调用phantomjs来生成网页截图的,phantomjs是非常有名的npm项目,相当于一个脚本版的WebKit浏览器 ,通过phantomjs可以使用脚本 和网页进行交互,所以phantomjs经常用来进行网页自动化测试。

phantomjs会和普通的浏览器一样加载完整的网页内容,然后在内存里面进行渲染,虽然肉眼看不到它渲染的页面,但是通过生成图片就可以看到了,node-webshot使用的就是phantomjs的render接口来获取网页截图的。

node-webshot生成谷歌首页的示例代码:

var webshot = require('webshot') webshot('google.com', 'google.png', function(err) { // screenshot now saved to google.png})phantomjs生成谷歌首页的示例代码: var page = require('webpage').create()page.open('http://github.com/', function() { page.render('github.png')phantom.exit()})

那为什么不直接使用phantomjs呢?一个字懒!

另外node-webshot还对文件读写进行了简单的封装,相信任何熟悉node.js的开发人员,都能很简单的写出这样的接口,但是既然轮子好用就不要自己造了。

node-webshot流式调用的写法:

var webshot = require('webshot')var fs = require('fs') var renderStream = webshot('google.com')var file = fs.createWriteStream('google.png', {encoding: 'binary'}) renderStream.on('data', function(data) { file.write(data.toString('binary'), 'binary')})

node-webshit还支持生成移动版的网页截图:

var webshot = require('webshot') var options = { screenSize: { width: 320 , height: 480 }, shotSize: { width: 320 , height: 'all' }, userAgent: 'Mozilla/5.0 (iPhoneUCPU iPhone OS 3_2 like Mac OS Xen-us)' + ' AppleWebKit/531.21.20 (KHTML, like Gecko) Mobile/7B298g'} webshot('flickr.com', 'flickr.jpeg', options, function(err) { // screenshot now saved to flickr.jpeg})

最后再把yargs和node-webshot进行集成,可惜这部分工作人家也帮我们做好了,直接安装就行。

npm isntall -g webshot-cli

使用desktop-screenshot进行系统截图

desktop-screenshot是一个跨平台的系统截图项目,用法和node-webshot类似,只是少了一个url参数。var screenshot = require('desktop-screenshot') screenshot("screenshot.png", function(error, complete) { if(error)console.log("Screenshot failed", error) elseconsole.log("Screenshot succeeded")})

具体步骤:

安装canvas2image后运行的时候,如果报错

在node_modules/canvas2image/canvas2image.js后面加上