endomondo.getPath.js

//Get the dataURL of Endomondo's Map Path
//requirement: jQuery
javascript: (function() {
	var input = $('#wokoutMapContainer .gm-style div:first div:first')[0];
	var final = {
		x1: Number.MAX_VALUE,
		y1: Number.MAX_VALUE,
		x2: Number.MIN_VALUE,
		y2: Number.MIN_VALUE
	};
	var getBox = function(div) {
		var x1 = parseInt(div.css('left'));
		var y1 = parseInt(div.css('top'));
		var x2 = x1 + parseInt(div.css('width'));
		var y2 = y1 + parseInt(div.css('height'));
		return {
			x1,
			y1,
			x2,
			y2
		}
	};
	$(input).find('canvas').map(function(i, obj) {
		var div = $(obj).parent();
		var box = getBox(div);
		if (box.x1 < final.x1) {
			final.x1 = box.x1;
		}
		if (box.y1 < final.y1) {
			final.y1 = box.y1;
		}
		if (box.x2 > final.x2) {
			final.x2 = box.x2;
		}
		if (box.y2 > final.y2) {
			final.y2 = box.y2;
		}
	});
	final.w = final.x2 - final.x1;
	final.h = final.y2 - final.y1;
	var canvas = $('<canvas></canvas>').attr({
		width: final.w,
		height: final.h
	});
	var canvas2 = canvas.clone()[0];
	canvas = canvas.prependTo('body')[0];
	var ctx = canvas.getContext('2d');
	var ctx2 = canvas2.getContext('2d');
	$(input).find('canvas').map(function(i, obj) {
		var div = $(obj).parent();
		var box = getBox(div);
		ctx.drawImage(obj, 0, 0, box.x2 - box.x1, box.y2 - box.y1, box.x1 - final.x1, box.y1 - final.y1, box.x2 - box.x1, box.y2 - box.y1);
	});
	ctx2.drawImage(canvas, 0, 0, final.w, final.h, 0, 0, final.w, final.h);
	var binaryBoundry = function(type, min, max) {
		var dataURL_orig = canvas2.toDataURL();
		while (min < max) {
			var center = ((min + max) / 2) ^ 0;
			switch (type) {
			case 'top':
				ctx.clearRect(0, 0, final.w, center);
				break;
			case 'bottom':
				ctx.clearRect(0, center, final.w, final.h - center);
				break;
			case 'left':
				ctx.clearRect(0, 0, center, final.h);
				break;
			case 'right':
				ctx.clearRect(center, 0, final.w - center, final.h);
				break;
			}
			if (canvas.toDataURL() != dataURL_orig) { //有刪到東西
				ctx.clearRect(0, 0, final.w, final.h);
				ctx.drawImage(canvas2, 0, 0, final.w, final.h, 0, 0, final.w, final.h);
				if (type == 'top' || type == 'left') {
					max = center;
				} else {
					min = center + 1;
				}
			} else {
				if (type == 'top' || type == 'left') {
					min = center + 1;
				} else {
					max = center;
				}
			}
		}
		return max;
	};
	var boundary = {
		x1: binaryBoundry('left', 0, final.w) - 1,
		y1: binaryBoundry('top', 0, final.h) - 1,
		x2: binaryBoundry('right', 0, final.w) + 1,
		y2: binaryBoundry('bottom', 0, final.h) + 1
	}
	boundary.w = boundary.x2 - boundary.x1;
	boundary.h = boundary.y2 - boundary.y1;
	canvas.width = boundary.w;
	canvas.height = boundary.h;
	ctx = canvas.getContext('2d');
	ctx.drawImage(canvas2, boundary.x1, boundary.y1, boundary.w, boundary.h, 0, 0, boundary.w, boundary.h);
    ctx.globalCompositeOperation = 'source-atop';
    ctx.fillStyle = prompt('which FillStyle?', 'rgba(0,0,0,0)');
    ctx.fillRect(0,0,boundary.w, boundary.h);
	filter_dataURL = canvas.toDataURL();
	ctx.globalCompositeOperation = 'source-over';
	ctx.clearRect(0,0,boundary.w, boundary.h);
	ctx.drawImage(canvas2, boundary.x1, boundary.y1, boundary.w, boundary.h, 0, 0, boundary.w, boundary.h);
	var img = new Image();
	img.src = filter_dataURL;
	img.onload = function() {
		ctx.globalCompositeOperation = 'color';
		ctx.drawImage(img, 0,0,boundary.w, boundary.h, 0, 0, boundary.w, boundary.h);
		window.open(canvas.toDataURL());
	}
})();