首页 > Web开发 > 详细

webshot一款网页快照工具

时间:2019-05-21 23:55:03      阅读:236      评论:0      收藏:0      [点我收藏+]

webshot

https://github.com/brenden/node-webshot

Webshot provides a simple API for taking webpage screenshots. The module is a light wrapper around PhantomJS, which utilizes WebKit to perform the page rendering.

 

例子

A simple url example:

var webshot = require(‘webshot‘);

webshot(‘google.com‘, ‘google.png‘, function(err) {
  // screenshot now saved to google.png
});

An html example:

var webshot = require(‘webshot‘);

webshot(‘<html><body>Hello World</body></html>‘, ‘hello_world.png‘, {siteType:‘html‘}, function(err) {
  // screenshot now saved to hello_world.png
});

Alternately, the screenshot can be streamed back to the caller:

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‘);
});

An example showing how to take a screenshot of a site‘s mobile version:

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
});

 

作用

给网页拍照, 生成网页照片图, 然后使用图形化比对工具检测图形变化, 进而检测页面变化。

用于图形并茂的方式, 给网页做介绍, 给用户更好的按照图形的感觉,记忆网站的使用场景。

例如, 用户看到网页截图中有一个搜索框, 就知道是搜索引擎。

 

webshot一款网页快照工具

原文:https://www.cnblogs.com/lightsong/p/10903183.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!