Node.js to achieve a quick screenshot _node.js

Writing an article often need to insert a picture, insert the existing picture is very simple, sometimes make some excellent list of sites need to add screenshots, this process is very boring, you can consider developing a command-line tool to pass a URL, and then generate a screenshot of the page.

Use Node-webshot for Web screenshots

The NPM module used has Yargs and node-webshot, and the Yargs article reference here is a complete guide to creating individual-specific command-line toolset--yargs from scratch.

Node-webshot is called Phantomjs to generate screenshots of the Web page, Phantomjs is a very well-known NPM project, the equivalent of a script version of the WebKit browser, through the PHANTOMJS can use scripts and Web pages to interact, So PHANTOMJS is often used for Web automation testing.

PHANTOMJS will load the full Web page content like a normal browser, and then render it in memory, although the page it renders is not visible to the naked eye, but it can be seen by creating a picture. Node-webshot uses the PHANTOMJS render interface to capture screenshots of the Web page.

Node-webshot generates the sample code for the homepage of Google:

var webshot = require (' Webshot '); 
 
Webshot (' google.com ', ' google.png ', function (err) { 
 //screenshot now saved to Google.png 
}); 
PHANTOMJS generates a sample code for Google's home page: 
 
var page = require (' webpage '). Create (); 
Page.open (' http://github.com/', function () { 
 page.render (' github.png '); 
 Phantom.exit (); 
}); 

So why not just use PHANTOMJS? a lazy word!

In addition, Node-webshot also a simple encapsulation of the file read and write, I believe any familiar with the Node.js developers, can be very simple to write such an interface, but since the wheel is easy to use do not build their own.

Node-webshot the method of streaming calls:

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 also supports the creation of a mobile version of the screenshot:

var webshot = require (' Webshot '); 
 
var options = { 
 screensize: { 
  width:320 
 , height:480 
 } 
, shotsize: { 
  width:320 
 , he ight: ' All ' 
 } 
, useragent: ' mozilla/5.0 (iPhone; U CPU iPhone os 3_2 like Mac os X; En-US) ' 
  + ' applewebkit/531.21.20 (khtml, like Gecko) mobile/7b298g ' 
}; 
 
Webshot (' flickr.com ', ' flickr.jpeg ', options, function (err) { 
 //screenshot now saved to Flickr.jpeg 
}); 

Finally, the integration of Yargs and node-webshot, unfortunately this part of the work of others also help us do, directly installed on the line.

NPM isntall-g WEBSHOT-CLI 

Use Desktop-screenshot for System screenshots

Desktop-screenshot is a cross-platform system screenshot project, similar in usage to Node-webshot, with only a missing URL parameter.

var screenshot = require (' Desktop-screenshot '); 
 
Screenshot ("Screenshot.png", function (error, complete) { 
  if (error) 
    Console.log ("screenshot failed", error); 
  else 
    Console.log ("screenshot succeeded"); 
 

This is my system screenshot.

The problem is that when I call the command line, the window will also appear on the screenshot, and there is no good way to remove the window, the system screenshot or use Windows to bring the handy point.

Picture optimization

Finally, we introduce two image optimization tools

Imagemin

Svgo

Svgo use to optimize SVG images, SVG will replace icon font as a new trend,