web-camera網頁截圖工具

kunn 8年前發布 | 9K 次閱讀 數碼相機 圖像處理軟件 前端技術

來自： http://finalshares.com/read-6723

web-camera網頁截圖工具

作者&源碼： https://github.com/node-modules/webcamera

通過phantomjs來打開渲染網頁，對網頁進行截圖。

Usage

var Camera = require('webcamera');
var fs = require('fs');


/**


    

  • web camera by Node.js and Phantomjs
    • 

  • @param {Object} options
    • 

    • 

    • path          {String}   default picture dir path
      • 

    

    • 

    • 

    • workerNum     {Number}   child_process max num
      • 

    

    • 

    • 

    • timeout       {Number}   child_process timeout.
      • 

    

    • 

    • 

    • phantom       {String}   phantomjs path
      • 

    

    • 

    • 

    • phantomScript {String}   phantomjs script path, use input arguments as default script
      • 

    

    • 

    • 

    • qnClient      {Object}   qiniu client instance
      • 

    

    • 

    • 

    • qnOpts        {Object}   qiniu options. if do not have qnClient and qnOpts, shotQN become invalid
*/
var camera = Camera.create({
qnOpts: {
accessKey: 'accessKey',
secretKey: 'secretKey',
bucket: 'webcamera'
}
});
      • 

    

    • 



// 當處理速度比調用速度低時會觸發此事件
camera.on('overload', function (listLength) {
  //listLength為排隊等待處理的長度
});


// 截圖保存到本地
camera.shot('

// 截圖作為stream
camera.shotStream('

//截圖上傳到七牛空間，第二個參數為上傳七牛的options，第三個參數是截圖的options
camera.shotQN('
  data.should.like:
  ({
    hash: 'FlDGti9pVGQ3sw2oao-mVu3nZWjZ',
    key: 'test/baidu.png',
    url: '/
});</pre> 
 
 所有的調用都可以在 callback 之前傳入參數 options . 


camera.shotQN('http://www.baidu.com',320, 'baidu.png', {
  clipRect: {
    top: 0,
    left:0,
    height: 'all',
    width: 'all'
  }
}, function (err, data) {
  /*
  data.should.like:
  {name: 'L1/1/320/baidu.png', size: 36889, url: 'xxx/L1/1/320/baidu.png'}
  */
});
 
 
<th width="18%">類型</th>

<th width="63%">含義</th>


</tr>
</thead> 
  
<td>Object</td>

<td>指定截圖的矩形區域。有四個屬性:top(0), left(0), height(window), width(window)。height和width可以設置為window或者all,window將會截取當前一屏，all會截取網頁全部大小</td>


</tr>
</tbody>
</table>
Install
$ npm install webcamera
Dependences
Debug
$ tail -f /tmp/phantom_shot.log &
$ phantomjs "phantom/web_camera_phantom.js" "https://github.com/" > github.png
 github page screen shot: github.png 
command line tool
 npm install webcamera -g , 之后可以使用web camera 提供的命令行工具進行網頁截圖。需要安裝 phantomjs 。 
camera -u http://www.google.com -o google.png


Options:
  -u, --url     Web's url
  -o, --out     Output screenshot picture path                                                  [default: "./out.png"]
  -c, --config  config file path, you can define much more options by a js file or a json file</pre> 
 
可以通過傳遞配置文件的方式進行批量截圖，并對截圖的詳細參數進行設置，配置文件可以是json文件或者js文件，配置文件模版：


#json形式
[{
  "url": "

js形式


var url = '

var config = [];


for (var quality = 10; quality <= 100; quality += 10) {
  config.push({
    url: url,
    out: 'google@' + quality + '.jpg',
    options: {
      quality: quality
    }
  });
}


module.exports = config;</pre> 
 
推薦通過js形式的配置文件，將會更加靈活。


Licences
(The MIT License)

 </article>

                    
                    

                        
 本文由用戶 kunn 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

                        
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

                        
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

                        
                        
                    


                
                

                    

                        
相關經驗

                        
                    

                    

                        
相關資訊

                        
                    

                    

                        
相關文檔

                        
                    


                    
                

            
        
      




   
    
    
    
    
    
    
    
 
    
    

    
    

    
    
    
    
    


 
   
   
 
    名字




 
   
 
    clipRect




 
    viewportSize

    Object

    設置網頁的分辨率，有兩個屬性:width(1024), height(768)。

   
 
    renderDelay

    Number

    網頁加載完成之后延遲多少毫秒之后截圖，默認為0

   
 
    picPath

    String

     設置圖片保存位置，只在 shot 方法時生效，等效于shot方法的第二個參數 

   
 
    mimeType

    String

    設置截圖的保存類型（只有在沒設置圖片保存路徑的情況下生效，否則使用圖片保存路徑的后綴類型），支持png, jpeg, gif.默認為png

   
 
    script

    Function

    網頁加載完成之后可以在網頁中執行這個方法。

   
 
    quality

    Number

    0~100，指定生成圖片的質量，數值越高質量越好

   


 
 
 
 

  • 

  • 

    • 

    •
    • sesese色