Tải xuống tệp hình ảnh tài nguyên bằng cách sử dụng casperjs

Question

Tôi đã đọc tài liệu và có vẻ như bạn cần có slimerjs http://docs.casperjs.org/en/latest/events-filters.html để nhận được responseData.body từ sự kiện page.resource.received. Trường hợp sử dụng của tôi là tải xuống hình ảnh khi trang được tải để tôi không thực hiện một chuyến đi vòng khác: lấy JSON tài nguyên, tải xuống và lưu bất kỳ tệp hình ảnh nào, tải lại tệp để kiểm tra kích thước hình ảnh và nếu quá nhỏ (biểu tượng) -> loại bỏ.

Tôi tự hỏi nếu có cách nào tốt hơn để thực hiện việc này. Tôi có thể thực sự đi làm evaluateimg bộ chọn nhưng một số trang web sử dụng background-url css và điều đó thật khó khăn.

Answer 1

Đánh giá có thể được khôn lanh, nhưng đây là một phương pháp có thể: (PhantomJS Chỉ)

Với ví dụ này theres khả năng

1. lưu trữ các clipRects trong những hình ảnh phù hợp với tiêu chí cụ thể cho hậu sau page.render() của những yếu tố đó vào tệp ảnh chụp màn hình.

2. lưu trữ các url của các nguồn lực phù hợp với từ sau tải yêu cầu

3. chụp url bên 'src' thuộc tính hoặc 'background-image' tài sản css, với một nỗ lực của cũng có được chiều rộng & chiều cao cho các tiêu chí phù hợp và chụp mục đích.

var page = require('webpage').create(); 
page.onConsoleMessage = function(msg) {console.log(msg);}; 
console.log('[#] I M A G E · N I N J A'); 
page.open('http://cartawifi.com', function(status) { 
    var clipRectList = page.evaluate(function(pagex) { 
    // .: Captured Images : In-Memory Reference Storage :. 
    const IMAGES = { 
     'src':{'indxs':[],'ref':[]}, 
     'background-image':{'indxs':[],'ref':[]}, 
     'selectors':[] 
    }; 
    var clipRects = []; // maybe you want to take page screenshots of specific elements containing matching images 
    var capturedImages = 0; var totalElements = 0; 
    // .: Define Image Capture : Min/Max Width/Height :. 
    const minWidth = 1; const minHeight = 1; 
    const maxWidth = 9999; const maxHeight = 9999; 
    const regxp = new RegExp('url'); 
    $('*').each(function(index, el) { var ignore=false; 
     // search for elements with 'background-image' css property 
     if($(el).css('background-image')!=null!=null){ 
      var wu = $(this).css('width'); 
      var width = parseFloat(wu.replace('px','')); 
      var hu = $(this).css('height'); 
      var height = parseFloat(wu.replace('px','')); 
      var src = $(el).css('background-image'); 
      var group = "background-image" 
      if(!src.match(regxp)){ignore=true;}else{ 
       //remove the keep the contents inside the 'url()' string' 
       src = (($(el).css('background-image')).slice(4)); 
       src = src.substring(0, src.length - 1); 
      } 
     } 
     // search for elements with 'src' html attribute 
     else if($(el).attr('src')!=null){ 
      var width = $(this).get(0).naturalWidth; 
      var height = $(this).get(0).naturalHeight; 
      var group = "src" 
      var src = $(el).attr('src'); 
     } 
     //--------------------------------------------------------- 
     if(width>=minWidth&&height>=minWidth&& 
      width<=maxWidth&&height<=maxWidth&& 
      !ignore){ 
       IMAGES[group].indxs.push(index); 
       IMAGES[group].ref.push(src); 
       IMAGES.selectors.push(this); 
       capturedImages++; 
       console.log(" [captured] :",group,width,height,src); 
       //:store clipRect for this element 
       var clipR = $.extend({},$(el).offset(),{width: $(el).offsetWidth,height: $(el).offsetHeight}); 
       console.log(" (clipRect)",JSON.stringify(clipR)); 
       clipRects.push(clipR); 
     } 
     totalElements++; 
    }); 
    // report information : 
    console.log('[i] Total Elements Parsed : ',totalElements); 
    console.log('[*] Total Images Captured : ',capturedImages); 
    console.log('  >    [src] : ',IMAGES['src'].indxs.length); 
    console.log('  > [background-image] : ',IMAGES['background-image'].indxs.length); 
    }); 
    console.log('[!] TO-DO : STORE CAPTURED IMAGES AS FILES'); 
    phantom.exit(); 
});