fillano/html drawimage test with drag&drop

## html drawimage test with drag&drop
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style>
	div {
		background: #AACCEE;
		border: solid 1px #336699;
		margin: 10px;
		padding: 5px;
		border-radius: 5px;
		display: inline-block;
		text-align: center
	}
	canvas {
		cursor: pointer;
	}
</style>
<script src="js/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function() {
	document.ondragenter = function(e){e.preventDefault();}
	document.ondragover = function(e){e.preventDefault();}
	$('#canvas')[0].addEventListener('dragenter', function(e){
		e.preventDefault();
		e.effectAllowed = 'move';
	},false);
	$('#canvas')[0].addEventListener('dragover', function(e){
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
	},false);
	$('#canvas')[0].addEventListener('drop', function(e){
		e.preventDefault();
		e.dataTransfer.dropEffect = 'move';
		if(e.dataTransfer.types && e.dataTransfer.types.length>0) {
			var isFile = false;
			for(var i=0; i<e.dataTransfer.types.length; i++) {
				if(e.dataTransfer.types[i] === 'Files' && e.dataTransfer.files.length>0) isFile = true;
			}
			for(var i=0; i<e.dataTransfer.types.length; i++) {
				if(e.dataTransfer.types[i]==='Files') {
				if(e.dataTransfer.files.length>0) {
					for(var j=0; j<e.dataTransfer.files.length; j++) {
						switch(e.dataTransfer.files[j].type) {
							case 'image/jpeg':
							case 'image/gif':
							case 'image/png':
							case 'image/bmp':
								(function(blob){
									var fileReader = new FileReader();
									fileReader.onload = function() {
										var img = document.createElement('img');

										img.src = this.result;
										setTimeout(function(){
											var ctx = $('#canvas')[0].getContext('2d');
											ctx.drawImage(img, 0, 0);
										},100);
									};
									fileReader.readAsDataURL(blob);
								})(e.dataTransfer.files[j]);
								break;
								default:
								alert('Only image file allowed.\nIncluding: jpeg, png, gif and bmp.');
								break;
						}
					}
				}
			}
		}
	}
},false);
});
</script>
</head>
<body>
<div id="container"><canvas id="canvas" width="640" height="480"></canvas></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="zh-TW">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8">
	<style>
	div {
	background: #AACCEE;
	border: solid 1px #336699;
	margin: 10px;
	padding: 5px;
	border-radius: 5px;
	display: inline-block;
	text-align: center
	}
	canvas {
	cursor: pointer;
	}
	</style>
	<script src="js/jquery-1.4.2.min.js"></script>
	<script>
	$(document).ready(function() {
	document.ondragenter = function(e){e.preventDefault();}
	document.ondragover = function(e){e.preventDefault();}
	$('#canvas')[0].addEventListener('dragenter', function(e){
	e.preventDefault();
	e.effectAllowed = 'move';
	},false);
	$('#canvas')[0].addEventListener('dragover', function(e){
	e.preventDefault();
	e.dataTransfer.dropEffect = 'move';
	},false);
	$('#canvas')[0].addEventListener('drop', function(e){
	e.preventDefault();
	e.dataTransfer.dropEffect = 'move';
	if(e.dataTransfer.types && e.dataTransfer.types.length>0) {
	var isFile = false;
	for(var i=0; i<e.dataTransfer.types.length; i++) {
	if(e.dataTransfer.types[i] === 'Files' && e.dataTransfer.files.length>0) isFile = true;
	}
	for(var i=0; i<e.dataTransfer.types.length; i++) {
	if(e.dataTransfer.types[i]==='Files') {
	if(e.dataTransfer.files.length>0) {
	for(var j=0; j<e.dataTransfer.files.length; j++) {
	switch(e.dataTransfer.files[j].type) {
	case 'image/jpeg':
	case 'image/gif':
	case 'image/png':
	case 'image/bmp':
	(function(blob){
	var fileReader = new FileReader();
	fileReader.onload = function() {
	var img = document.createElement('img');

	img.src = this.result;
	setTimeout(function(){
	var ctx = $('#canvas')[0].getContext('2d');
	ctx.drawImage(img, 0, 0);
	},100);
	};
	fileReader.readAsDataURL(blob);
	})(e.dataTransfer.files[j]);
	break;
	default:
	alert('Only image file allowed.\nIncluding: jpeg, png, gif and bmp.');
	break;
	}
	}
	}
	}
	}
	}
	},false);
	});
	</script>
	</head>
	<body>
	<div id="container"><canvas id="canvas" width="640" height="480"></canvas></div>
	</body>
	</html>