使用casperjs下载资源图片文件
Download resource image files using casperjs
我阅读了文档,看起来您需要安装 slimerjs http://docs.casperjs.org/en/latest/events-filters.html 才能从 page.resource.received
事件中获得 responseData.body
。
我的用例是在加载页面时下载图像,因此我不会再进行以下往返:获取资源 JSON、下载并保存任何图像文件、重新加载文件以进行检查对于图像尺寸,如果太小(图标)-> 消除。
我想知道是否有更好的方法来做到这一点。事实上,我可以使用 evaluate
img
选择器,但有些网站使用 background-url
css,这很棘手。
评估可能很棘手,但这里有一个可能的方法:(仅限 PhantomJS)
这个例子有可能
存储符合特定条件的图像 clipRects
这些元素的后 page.render()
进入屏幕截图文件。
存储匹配资源url供后续下载
请求
在 'src' 属性或 'background-image' 中捕获 url
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();
});
我阅读了文档,看起来您需要安装 slimerjs http://docs.casperjs.org/en/latest/events-filters.html 才能从 page.resource.received
事件中获得 responseData.body
。
我的用例是在加载页面时下载图像,因此我不会再进行以下往返:获取资源 JSON、下载并保存任何图像文件、重新加载文件以进行检查对于图像尺寸,如果太小(图标)-> 消除。
我想知道是否有更好的方法来做到这一点。事实上,我可以使用 evaluate
img
选择器,但有些网站使用 background-url
css,这很棘手。
评估可能很棘手,但这里有一个可能的方法:(仅限 PhantomJS)
这个例子有可能
存储符合特定条件的图像
clipRects
这些元素的后page.render()
进入屏幕截图文件。存储匹配资源url供后续下载 请求
在 'src' 属性或 'background-image' 中捕获 url 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();
});