resize-image.js

var xyz = {};
xyz.receiverURL = '.res/save-proxy-image.php';
xyz.resizeImage = function(img, dstw, dsth, fit) {
	try {
		var w = dstw;
		var h = dsth;
		if (img.naturalWidth === 0 || img.naturalHeight === 0)
			return null;
		if (img.naturalWidth > dstw || img.naturalHeight > dsth) {
			if (fit) {
				// fit
				if (img.naturalWidth < img.naturalHeight)
					w = parseInt(dstw / (img.naturalHeight / img.naturalWidth));
				else if (img.naturalWidth > img.naturalHeight)
					h = parseInt(dsth / (img.naturalWidth / img.naturalHeight));
			}
			else {
				// crop
				if (img.naturalWidth < img.naturalHeight)
					h = parseInt(dsth / (img.naturalWidth / img.naturalHeight));
				else if (img.naturalWidth > img.naturalHeight)
					w = parseInt(dstw / (img.naturalHeight / img.naturalWidth));
			}
		}
		else {
			w = img.naturalWidth;
			h = img.naturalHeight;
		}
		var canvas = document.createElement('canvas');
		canvas.width = w;
		canvas.height = h;
		var ctx = canvas.getContext('2d');
		console.debug('drawing image', img.src, 'in rect', w, h);
		ctx.drawImage(img, 0, 0, w, h);
		var dataType = 'image/png';
		if (img.src.match(/\.jpe?g($|\?)/i))
			dataType = 'image/jpeg';
		var data = canvas.toDataURL(dataType);
		var b64data = null;
		// data:image/jpeg;base64,b...
		if (data.substr(0,5) === 'data:') {
			var p = data.indexOf(';');
			dataType = data.substring(5, p);
			if (data.substr(p+1, 7) === 'base64,')
				b64data = data.substr(p+8);
		}
		if (b64data === null)
			return null;
		return {w:w, h:h, type:dataType, data:b64data, raw:data};
	}
	catch (e) {
		console.log('failed to resample image', e);
		return null;
	}
}

xyz.compatXssPost = function(params, url, cb) {
	var iframe = document.createElement('iframe');
	iframe.name = 'formiframe'+(new Date()).getTime();
	iframe.id = iframe.name;
	iframe.style.display = 'none';
	document.body.appendChild(iframe);
	var form = document.createElement('form');
	form.method = 'POST';
	form.action = url;
	form.target = iframe.name;
	for (var k in params) {
		var input = document.createElement('input');
		input.type = 'hidden';
		input.name = k;
		input.value = params[k];
		form.appendChild(input);
	}
	form.style.display = 'none';
	document.body.appendChild(form);
	form.submit();
	iframe.onload = function(e) {
		if (typeof cb === 'function')
			cb(form, iframe);
		setTimeout(function(){ iframe.parentNode.removeChild(iframe); },30000);
		form.parentNode.removeChild(form);
	};
}

xyz.saveProxyImage = function(img, dstw, dsth, cb, params) {
	if (dstw === undefined) dstw = 160;
	if (dsth === undefined) dsth = 160;
	var pim = xyz.resizeImage(img, dstw, dsth, false);
	if (pim) {
		var _params = {
			original_url: img.src,
			proxy_type:   pim.type,
			proxy_data:   pim.data,
			proxy_w:      pim.w,
			proxy_h:      pim.h
		};
		if (typeof params === 'object')
			for (var k in params)
				_params[k] = params[k];
		xyz.compatXssPost(_params, xyz.receiverURL, cb);
	}
	else if (typeof cb === 'function') {
		cb('fail');
	}
	return pim;
}

// end of proxy image kit

var needthumbs = [/* array built at server-side with pathnames to pictures in need of processing */];
var needthumbs_i = 0;
var hard_failures = 0;

var endfun = function(form, iframe) {
	if (form === 'fail') {
		hard_failures++;
	}
	else {
		try { console.log($(iframe.contentDocument.body).text()); }catch(e){}
	}
	
	if (needthumbs_i >= needthumbs.length-1) {
		// reached end
		// trigger recache
		console.log('created '+(needthumbs_i-hard_failures)+' images ('+hard_failures+' failures)');
		var x = new Image();
		x.src = './?refresh';
	}
	else {
		needthumbs_next();
	}
}

function needthumbs_next() {
	var fn = needthumbs[needthumbs_i++];
	var img = new Image();
	img.src = fn;
	var supervisor = function() {
		if (img.complete)
			xyz.saveProxyImage(img, 160, 160, endfun, {filename: fn});
		else
			setTimeout(supervisor, 100);
	}
	supervisor();
}
needthumbs_next();