Upload resource image files using casperjs

Question

I read the docs and see what you need to have slimerjs http://docs.casperjs.org/en/latest/events-filters.html to get responseData.body from the page.resource.received event.

My use case is loading images when the page loads, so I don’t do the next round: I get the JSON resource, load and save any image file, reload the file to check the image size, and if small (icons) → fix.

I am wondering if there is a better way to do this. Actually, I could make a evaluate img selector, but some websites use css background-url and this is complicated.

Answer 1

Evaluation can be complicated, but here's a possible approach: (PhantomJS only)

In this example, there is a possibility

• saving clipRects images that meet certain criteria for posterior page.render() these elements in screenshot files.

• saving URLs of related resources for later download

• capturing the URL inside the 'src' or 'background-image' css attribute, trying to get the width and height for matching and capturing criteria.

 var page = require('webpage').create(); page.onConsoleMessage = function(msg) {console.log(msg);}; console.log('[#] IMAGE · NINJ 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(); });