使用 casperjs 下载资源图像文件

Question

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

我的用例是在加载页面时下载图像，这样我就不会再做一次往返：获取资源 JSON，下载并保存任何图像文件，重新加载文件以检查图像尺寸，如果太小(图标(->消除。

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

Answer 1

评估可能很棘手，但这里有一种可能的方法：(仅限 PhantomJS(

有了这个例子，有可能

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

2. 存储匹配资源的 URL 以供后验下载 请求

3. 捕获"src"属性或"背景图像"中的网址 CSS 属性，并尝试获取宽度和高度以用于条件匹配和捕获目的。

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