view release on metacpan or  search on metacpan

ccv-src/js/index.html  view on Meta::CPAN

	var result = {};
	document.body.appendChild(image);
	result['width'] = image.offsetWidth;
	result['height'] = image.offsetHeight;
	document.body.removeChild(image);
	return result;
}

function detectNewImage(src, async) {
	document.getElementById("load-time").innerHTML = "Measuring ...";
	document.getElementById("detection-time").innerHTML = "None";
	document.getElementById("num-faces").innerHTML = "?";
	document.getElementById("image-dim").innerHTML = "?x?";
	var elapsed_time = (new Date()).getTime();
	var image = new Image();
	var canvas = document.getElementById("output");
	var ctx = canvas.getContext("2d");
	image.onload = function () {
		/* load image, and draw it to canvas */
		document.getElementById("load-time").innerHTML = Math.round((new Date()).getTime() - elapsed_time).toString() + "ms";
		document.getElementById("detection-time").innerHTML = "Measuring ...";
		var dim = getImageDim(image);
		document.getElementById("image-dim").innerHTML = dim.width.toString() + "x" + dim.height.toString();
		var boundingWidth = document.getElementById("content").offsetWidth - 4;
		var boundingHeight = window.innerHeight - (document.getElementById("header").offsetHeight + document.getElementById("footer").offsetHeight + document.getElementById("urlbox").offsetHeight + document.getElementById("stats").offsetHeight) - 120;
		var viewport = document.getElementById("viewport");
		var newWidth = dim.width, newHeight = dim.height, scale = 1;
		if (dim.width * boundingHeight > boundingWidth * dim.height) {
			newWidth = boundingWidth;
			newHeight = boundingWidth * dim.height / dim.width;
			scale = newWidth / dim.width;
		} else {
			newHeight = boundingHeight;
			newWidth = boundingHeight * dim.width / dim.height;
			scale = newHeight / dim.height;
		}
		viewport.style.width = newWidth.toString() + "px";
		viewport.style.height = newHeight.toString() + "px";
		canvas.width = newWidth;
		canvas.style.width = newWidth.toString() + "px";
		canvas.height = newHeight;
		canvas.style.height = newHeight.toString() + "px";
		ctx.drawImage(image, 0, 0, newWidth, newHeight);
		elapsed_time = (new Date()).getTime();
		function post(comp) {
			document.getElementById("num-faces").innerHTML = comp.length.toString();
			document.getElementById("detection-time").innerHTML = Math.round((new Date()).getTime() - elapsed_time).toString() + "ms";
			ctx.lineWidth = 2;
			ctx.strokeStyle = 'rgba(230,87,0,0.8)';
			/* draw detected area */
			for (var i = 0; i < comp.length; i++) {
				ctx.beginPath();
				ctx.arc((comp[i].x + comp[i].width * 0.5) * scale, (comp[i].y + comp[i].height * 0.5) * scale,
						(comp[i].width + comp[i].height) * 0.25 * scale * 1.2, 0, Math.PI * 2);
				ctx.stroke();
			}
		}
		/* call main detect_objects function */
		if (async) {
			ccv.detect_objects({ "canvas" : ccv.grayscale(ccv.pre(image)),
								 "cascade" : cascade,
								 "interval" : 5,
								 "min_neighbors" : 1,
								 "async" : true,
								 "worker" : 1 })(post);
		} else {
			var comp = ccv.detect_objects({ "canvas" : ccv.grayscale(ccv.pre(image)),
											"cascade" : cascade,
											"interval" : 5,
											"min_neighbors" : 1 });
			post(comp);
		}
	};
	image.src = src;
}

function handleLocalFile(file) {
	if (file.type.match(/image.*/)) {
		var reader = new FileReader();
		reader.onload = function (e) {
			detectNewImage(e.target.result, async);
		};
		reader.readAsDataURL(file);
	}
}

document.getElementById("viewport").addEventListener("dragover", function (e) {
	e.stopPropagation();
	e.preventDefault();
	document.getElementById("view-hint").style.zIndex = 
		document.getElementById("view-horz").style.zIndex = 
			document.getElementById("view-vtic").style.zIndex = "1000";
}, false);

if (agent.browser == "mozilla") {
	document.getElementById("file-selector").style.display = "none";
	document.getElementById("file-selector").addEventListener("click", function (e) {
		e.stopPropagation();
		e.preventDefault();
	}, false);
	document.getElementById("viewport").addEventListener("click", function (e) {
		e.stopPropagation();
		e.preventDefault();
		document.getElementById("file-selector").click();
	}, false);
}

document.getElementById("viewport").addEventListener("mouseover", function (e) {
	document.getElementById("view-hint").style.zIndex = 
		document.getElementById("view-horz").style.zIndex = 
			document.getElementById("view-vtic").style.zIndex = "1000";
});

document.getElementById("viewport").addEventListener("mouseout", function (e) {
	document.getElementById("view-hint").style.zIndex = 
		document.getElementById("view-horz").style.zIndex = 
			document.getElementById("view-vtic").style.zIndex = "0";
});

document.getElementById("file-selector").addEventListener("change", function (e) {
	var files = this.files;
	if (files.length)
		handleLocalFile(files[0]);
});

document.getElementById("viewport").addEventListener("drop", function (e) {
	e.stopPropagation();
	e.preventDefault();