javascript - 使用casperjs下载资源图片文件

Question

我阅读了文档，看起来您需要 slimerjs http://docs.casperjs.org/en/latest/events-filters.html为了从 page.resource.received 事件中获取 responseData.body。

我的用例是在加载页面时下载图像，因此我不会再进行以下往返:获取资源 JSON、下载并保存任何图像文件、重新加载文件以检查图像尺寸以及是否太高小(图标)-> 消除。

我想知道是否有更好的方法来做到这一点。事实上，我可以去做 evaluate img 选择器，但有些网站使用 background-url css，这很棘手。

Answer 1

评估可能很棘手，但这是一种可能的方法:(仅限 PhantomJS)

在这个例子中有可能

1. 存储符合特定条件的图像的 clipRects这些元素的后page.render() 到屏幕截图文件中。

2. 存储匹配资源的url供后续下载要求

3. 捕获“src”属性或“背景图像”中的 urlcss 属性，同时尝试获取宽度和高度以用于标准匹配和捕获目的。

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