When writing articles, you often need to insert pictures. Inserting existing pictures is very simple. Sometimes when you make some excellent website lists, you need to add web page screenshots. This process is very boring. You can consider developing a command line tool to pass in a url and then generate page screenshots.
Use node-webshot for web page screenshot
The npm modules used include yargs and node-webshot. For articles about yargs, please refer to here to create a personal exclusive command line tool set from scratch - a complete guide to yargs.
node-webshot calls phantomjs to generate web page screenshots. phantomjs is a very famous npm project, equivalent to a scripted version of WebKit browser. Through phantomjs, scripts and web pages can be interacted with, so phantomjs is often used for web page automation testing.
phantomjs will load the complete web page content like an ordinary browser and then render it in memory. Although the page it renders cannot be seen with the naked eye, you can see it by generating pictures. node-webshot uses phantomjs' render interface to obtain web page screenshots.
node-webshot generates sample code for Google homepage:
var webshot = require('webshot'); webshot('google.com', 'google.png', function(err) { // screenshot now saved to google.png }); phantomjs generates sample code for Google homepage: var page = require('webpage').create(); page.open('http://github.com/', function() { page.render('github.png'); phantom.exit(); });Then why not use phantomjs directly? One word is lazy!
In addition, node-webshot also simply encapsulates file reading and writing. I believe that any developer familiar with node.js can easily write such an interface, but since the wheel is easy to use, don't make it yourself.
How to write node-webshot 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 generating mobile version of web page screenshots:
var webshot = require('webshot'); var options = { screenSize: { width: 320 , height: 480 } , shotSize: { width: 320 , height: '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, we integrated yargs and node-webshot, but unfortunately, we also helped us with this part of the work, just install it directly.
npm isntall -g webshot-cli
System screenshot using desktop-screenshot
desktop-screenshot is a cross-platform system screenshot project. Its usage is similar to node-webshot, except that one url parameter is missing.
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 a screenshot of my system
The problem is that when I call the command line, this window will also appear on the screenshot, and there is no good way to remove this window. The system screenshot is still a good point that comes with Windows.
Image optimization
Finally, two image optimization tools are introduced
imagemin
svgo
svgo is used to optimize svg images. svg will replace icon font and become a new trend.