Go Phantomjs to get a snapshot of a webpage and generate a thumbnail image

Shell script implementation Get a snapshot of a Web page and generate thumbnails this article mainly introduces the shell script implementation to get a snapshot of the Web page and generate thumbnails, this article gets the page snapshot using PHANTOMJS, generate thumbnails using ImageMagick, the need for friends can refer to the following

Getting a snapshot of a webpage and generating thumbnails can be done in two steps:

1. Get a snapshot of a webpage

2. Generate thumbnail images

Get a snapshot of a webpage

Here we use PHANTOMJS to achieve. You can refer to the official website for detailed usage of PHANTOMJS. http://phantomjs.org/

1. Installation

My environment is CentOS 7, the installation of direct download source code, my next version is 2.0.0, installed in accordance with the official website instructions.

2. Call
The PHANTOMJS call requires a JS script. This JS script receives two parameters, namely URL url and snapshot file name filename, script snap.js content as follows:

Copy CodeThe code is as follows:

/** desc:get snapshot from URL * example:phantomjs snap.js http://www.baidu.com baidu.png*/varpage = require (' webpage '). Create ();varargs = require (' System '). args;varPagew = 1024;varPageh = 768;p age.viewportsize={width:pagew, height:pageh};varURL = args[1];varfilename = args[2];p age.open (URL,function(status) {if(Status!== ' success ') {Console.log (' Unable to load ' + URL + '! ');    Phantom.exit (); } Else{window.settimeout (function() {Page.cliprect= {left:0, top:0, Width:pagew, Height:pageh};            Page.render (filename); Console.log (' Finish: ', filename);        Phantom.exit (); }, 1000); }});

In this script there is also a small setting, that is, to set the open page of the browser viewable area of the size of 1024x768, and then take the first screen content.

The Invoke command is as follows:

Copy CodeThe code is as follows:
Phantomjs snap.js http://www.baidu.com Baidu.png

Note: The user who executes the command here needs to have write access to the directory.

3. Effect

Get the following:

Generate thumbnail images

Generate thumbnails with the ImageMagick tool, ImageMagick is a very powerful image processing tool to convert images (format conversion, zoom, cut, blur, invert, etc.), screen, picture display, detailed usage can refer to my imagemagick use of the article.

1. Installation

The Redhat series can be installed with Yum:

Copy CodeThe code is as follows:
# yum Install ImageMagick Imagemagick-devel

Other platform installation please refer to the official website: http://www.imagemagick.org/script/binary-releases.php, according to your system to choose the appropriate package or compile their own source code.

2. Call

We only use the Image Zoom tool here, the syntax is:

The code is as follows:
Convert-resize Baidu.png Baidu_thumbnail.png

The default is scale by ratio, and if you want to force scaling, you can add an exclamation mark after the dimension:

The code is as follows:
Convert-resize 320x240! Baidu.png Baidu_thumbnail.png

3. Effect

The resulting thumbnail image is as follows:

Integration Scripts
If you want to automate the previous two steps, you can write a shell script implementation:

The code is as follows:

#!/bin/bash# desc:create snapshot from url# example:sh createsnap.sh http://www.baidu.com baidu< /c2>URL=$1image_name=$2snapshot_name= "${image_name}.png"thumbnail_name = "${ Image_name}_thumbnail.png "-resize0

Go Phantomjs to get a snapshot of a webpage and generate a thumbnail image