|
Get a snapshot of the page and generates a thumbnail in two steps:
1, to obtain a snapshot of the page
2, generate thumbnails
Being Cached
Here we use phantomjs to achieve. More information for phantomjs can refer to the official website.
1, the installation
My environment is CentOS6.5, directly download the installation tarball and extract can be.
# Wget https://bitbucket.org/ariya/phantomjs/downloads/phantomjs-1.9.8-linux-i686.tar.bz2
# Tar -jxvf phantomjs-1.9.8-linux-i686.tar.bz2
# Cp phantomjs-1.9.8-linux-i686 / bin / phantomjs / bin / phantomjs
After the second step of extracting phantomjs binaries bin directory that is callable command.
The third step is to invoke the command at a later time without having to enter the full path to the command.
2, call
phantomjs calls require a js script. The js script takes two parameters, namely, the snapshot file name and URL url filename, the script snap.js reads as follows:
/ *
* Desc: get snapshot from url
* Example: phantomjs snap.js http://www.baidu.com baidu.png
* /
var page = require ( 'webpage') create ().;
var args = require ( 'system') args.;
var pageW = 1024;
var pageH = 768;
page.viewportSize = {
width: pageW,
height: pageH
};
var url = args [1];
var filename = args [2];
page.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 a small set, is set to open the browser page viewing area size is 1024 * 768, then take the first screen content.
Invoke the command as follows:
phantomjs snap.js http://www.baidu.com baidu.png
Note: This requires a user to execute a command has write access to the directory.
3, the effect
Generate thumbnails
Generate thumbnails using ImageMagick tool ImageMagick is a very powerful image processing tool for image conversion (format conversion, scaling, cropping, blurring, reverse, etc.), screenshots, pictures display, refer to the detailed usage my experience using ImageMagick article.
1, the installation
RedHat series can be installed using yum:
# Yum install ImageMagick ImageMagick-devel
Other platform installation, please refer the official website: http: //www.imagemagick.org/script/binary-releases.php, depending on your system, select the appropriate package or compile the source yourself.
2, call
We only use the image zoom tool, the syntax is:
convert -resize 320x240 baidu.png baidu_thumbnail.png
The default is based on the ratio of the zoom, if you want to force scaling, you can add an exclamation point at the back Size:
convert -resize 320x240! baidu.png baidu_thumbnail.png
3, the effect
Integration Script
If you want to step on automation, you can write a shell script implementation:
#! / Bin / bash
# Desc: create snapshot from url
# Example: sh createsnap.sh http://www.baidu.com baidu
URL = $ 1
IMAGE_NAME = $ 2
SNAPSHOT_NAME = "$ {IMAGE_NAME} .png"
THUMBNAIL_NAME = "$ {IMAGE_NAME} _thumbnail.png"
phantomjs snap.js $ URL $ SNAPSHOT_NAME
convert -resize 320x240 $ SNAPSHOT_NAME $ THUMBNAIL_NAME
exit 0 |
|
|
|