写文章的时候，经常需要插入图片。插入现有图片非常简单。有时候，在制作一些优秀的网站列表时，需要添加网页截图。这个过程很无聊。你可以考虑开发一个命令行工具，传入一个网址，然后生成网页截图。

使用node-webshot拍摄网页截图

使用的npm模块包括yargs和node-webshot。有关yargs的文章，请参考从头开始创建个人命令行工具集——yargs的完整指南。

Node-webshot调用phantomjs生成网页截图。phantomjs是一个非常著名的npm项目，相当于WebKit浏览器的一个脚本版本。通过phantomjs，可以使用脚本与网页进行交互，因此phantomjs常用于网页自动化测试。

Phantomjs会像普通浏览器一样加载完整的网页内容，然后在内存中渲染。虽然phantomjs渲染的页面肉眼看不到，但是通过生成图片可以看到。node-webshot使用Phantom JS的Render界面来获取网页的截图。

通过节点-网页截图生成谷歌主页的示例代码：

var web shot=require(' web shot ')；webshot('google.com '，' google.png '，函数(err) { //截图现已保存至google.png })；phantomjs生成Google主页的示例代码：varpage=require('网页')。create()；page.open('http://github.com/'，function(){ page . render(' github . png ')；phantom . exit()；});那为什么不直接用phantomjs呢？一个字就是懒！

此外，node-webshot还简单地封装了文件读写。我相信任何熟悉node.js的开发人员都可以简单地编写这样的接口，但是既然wheel很容易使用，就不要自己创建了。

node-webshot流调用的编写方法；

var web shot=require(' web shot ')；var fs=require(' fs ')；var render stream=web shot(' Google.com ')；var file=fs . createwritestream(' Google . png '，{ encoding : ' binary ' })；renderStream.on('data '，function(data){ file . write(data . tostring(' binary ')，' binary ')；});Node-webshit还支持生成手机页面截图：

var web shot=require(' web shot ')；var options={ screensize : { width : 320，height: 480 }，shotSize: { width: 320，height: 'all' }，user agents : ' Mozilla/5.0(iPhone；u；CPU iPhone OS 3_2像Mac OS X；en-us)' ' applebwebkit/531 . 21 . 20(KHTML，像Gecko)Mobile/7b 298g ' }；webshot('flickr.com '，' flickr.jpeg '，选项，函数(err) { //截图现已保存至flickr.jpeg })；最后，我们将yargs与node-webshot集成在一起，但不幸的是，人们已经为我们做了这项工作，所以我们可以直接安装它。

NPM is tall-g web shot-CLI使用桌面截图来拍摄系统截图

桌面截图是一个跨平台的系统截图项目，除了一个url参数之外，它的用法与node-webshot类似。

var截图=必选('桌面-截图')；截图('截图. png '，函数(错误，完整){ if(错误)console.log('截图失败，错误)；else console.log('截图成功')；});这是我的系统截图

问题是我调用命令行的时候，截图上也会出现这个窗口，没有很好的方法可以去掉这个窗口。该系统的截图仍然很容易与windows一起使用。

图像优化

最后，介绍了两种图像优化工具

imagemin

svgo

Svgo用于优化svg图片，svg将取代图标字体成为新趋势。