url-to-image, PhantomJS screenshotting已经完成

分享于 

8分钟阅读

GitHub

  繁體 雙語
PhantomJS screenshotting done right
  • 源代码名称:url-to-image
  • 源代码网址:http://www.github.com/kimmobrunfeldt/url-to-image
  • url-to-image源代码文档
  • url-to-image源代码下载
  • Git URL:
    git://www.github.com/kimmobrunfeldt/url-to-image.git
    Git Clone代码到本地:
    git clone http://www.github.com/kimmobrunfeldt/url-to-image
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/kimmobrunfeldt/url-to-image
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    url-to-image

    Build StatusDependency StatusdevDependency Status

    获取给定页面的屏幕截图。 这个 MODULE 正确处理动态加载AJAX请求的页面。 在呈现之前,不需要等待固定的时间,我们给页面做一个短时间来做额外的请求。

    代码的使用率为

    var urlToImage =require('url-to-image');urlToImage('http://google.com', 'google.png').then(function() {
     // now google.png exists and contains screenshot of google.com}).catch(function(err) {
     console.error(err);
    });

    来自 命令行的使用率:

    $ urltoimage http://google.com google.png

    有时,从PhantomJS中查看请求,响应和页面错误很有用:

    $ urltoimage http://google.com google.png --verbose
    -> GET http://google.com/
    -> GET http://www.google.fi/?gfe_rd=cr&ei=xTYxVouuOeiA8QexyZ2QBw<- 302 http://google.com/
    -> GET http://ssl.gstatic.com/gb/images/b_8d5afc09.png
    ... quite a lot of requests.. .
    -> GET http://ssl.gstatic.com/gb/js/sem_32d9c4210965b8e7bfa34fa376864ce8.js<- 200 http://ssl.gstatic.com/gb/js/sem_32d9c4210965b8e7bfa34fa376864ce8.js
    Render screenshot..
    Done.

    有关更多选项,请参见章。

    安装

    
    npm install url-to-image
    
    
    
    

    使用中/PhantomJS NPM MODULE 安装 PhantomJS。

    API

    var urlToImage =require('url-to-image');
    urlToImage ( url,filePath,选项)

    这将运行一个PhantomJS脚本( url-to-image.js ),它将给定的url呈现给图像。

    参数

    • 将呈现为图像的页面的url Url。 例如 http://google.com

    • 保存渲染图像的filePath 文件路径。

    • 用于页面渲染的options 选项。

      选项的默认值为

      {
       // User agent width width:1200,
       // User agent height height:800,
       // The file type of the rendered image. By default, PhantomJS // sets the output format automatically based on the file extension.// Supported: PNG, GIF, JPEG, PDF fileType:'jpeg',
       // The file quality of the rendered image, represented as a percentage. // This reduces the image size. By default, 100 percent is used. fileQuality:100,
       // Sets the width of the final image (cropped from the User agent defined size)// By default, no cropping is done. cropWidth:false,
       // Sets the height of the final image (cropped from the User agent defined size)// By default, no cropping is done. cropHeight:false,
       //Sets the offset of where to begin the image cropping from the left margin // of the page cropOffsetLeft:0,
       //Sets the offset of where to begin the image cropping from the top margin // of the page cropOffsetTop:0,
       // How long in ms do we wait for additional requests// after all initial requests have gotten their response// Note: this does NOT limit the amount of time individual request// can take in time requestTimeout:300,
       // How long in ms do we wait at maximum. The screenshot is// taken after this time even though resources are not loaded maxTimeout:1000*10,
       // How long in ms do we wait for phantomjs process to finish.// If the process is running after this time, it is killed. killTimeout:1000*60*2,
       // If true, phantomjs script will output requests and responses to stdout verbose:false// String of of phantomjs arguments// You can separate arguments with spaces// See options in http://phantomjs.org/api/command-line.html phantomArguments:'--ignore-ssl-errors=true'}

    蓝鸟承诺对象。

    详细示例

    var urlToImage =require('url-to-image');var options = {
     width:600,
     height:800,
     // Give a short time to load additional resources requestTimeout:100}urlToImage('http://google.com', 'google.png', options)
    .then(function() {
     // do stuff with google.png})
    .catch(function(err) {
     console.error(err);
    });

    命令行 接口( CLI )

    包还附带了一个名为 urltoimage的cli。

    
    Usage: urltoimage <url> <path> [options]
    
    
    
    <url> Url to take screenshot of
    
    
    <path> File path where the screenshot is saved
    
    
    
    Options:
    
    
     --width Width of the viewport [string] [default: 1280]
    
    
     --height Height of the viewport [string] [default: 800]
    
    
     --file-type The file type of the rendered image. By default, 
    
    
     PhantomJS sets the output format automatically based on 
    
    
     the file extension. Supported: PNG, GIF, JPEG, PDF
    
    
     [string] [default: false]
    
    
     --file-quality The file quality of the rendered image, represented as a 
    
    
     percentage. This reduces the image size. 
    
    
     By default, 100 percent is used.
    
    
     [string] [default: 100]
    
    
     --crop-width Sets the width of the final image (cropped from the User 
    
    
     agent defined size).
    
    
     [string] [default: false]
    
    
     --crop-height Sets the height of the final image (cropped from the User 
    
    
     agent defined size).
    
    
     [string] [default: false]
    
    
     --cropoffset-left Sets the offset of where to begin the image cropping from 
    
    
     the left margin of the page.
    
    
     [string] [default: false]
    
    
     --cropoffset-top Sets the offset of where to begin the image cropping from 
    
    
     the top margin of the page.
    
    
     [string] [default: false]
    
    
     --request-timeout How long in ms do we wait for additional requests after
    
    
     all initial requests have gotten their response
    
    
     [string] [default: 300]
    
    
     --max-timeout How long in ms do we wait at maximum. The screenshot is
    
    
     taken after this time even though resources are not
    
    
     loaded [string] [default: 10000]
    
    
     --kill-timeout How long in ms do we wait for phantomjs process to
    
    
     finish. If the process is running after this time, it is
    
    
     killed. [string] [default: 120000]
    
    
     --phantom-arguments Command line arguments to be passed to phantomjs
    
    
     process.You must use the format
    
    
     --phantom-arguments="--version".
    
    
     [string] [default:"--ignore-ssl-errors=true"]
    
    
     --verbose If set, script will output additional information to
    
    
     stdout. [boolean] [default: false]
    
    
     -h, --help Show help [boolean]
    
    
     -v, --version Show version number [boolean]
    
    
    
    Examples:
    
    
     urltoimage http://google.com google.png
    
    
    
    
    贡献者

    版本

    测试

     
    npm test
    
    
    
     

    属性

    这个 MODULE 是由

    许可证

    MIT


    相关文章