lyo/drag_n_drop.html

## drag_n_drop.html
<!doctype html>
<html>
<head>
	<title>Drag n drop test</title>

	<style type="text/css">
		body {text-align: center; padding-top: 100px;}
		em {position: absolute; bottom: 0; right: 0}
		canvas { border: 1px solid black; }
	</style>

	<script type="text/javascript">
		window.ondragover = function(e) {e.preventDefault()}
		window.ondrop = function(e) {e.preventDefault(); draw(e.dataTransfer.files[0]); }

		function draw(file){

		    var img =new Image();
		    img.src = URL.createObjectURL(file);;

		    var canvas=document.getElementById("image_canvas");
		    var ctx = canvas.getContext("2d");

		    // call ctx.drawImage when the image got loaded
		    img.onload = function() {
		    	// ctx.drawImage(img, 0, 0);
   				ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); // stretch img to canvas size
			}

		}
	</script>
</head>
<body>
	<div>DROP!</div>
	<canvas id="image_canvas" width="200" height="200"></canvas>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Drag n drop test</title>

	<style type="text/css">
	body {text-align: center; padding-top: 100px;}
	em {position: absolute; bottom: 0; right: 0}
	canvas { border: 1px solid black; }
	</style>

	<script type="text/javascript">
	window.ondragover = function(e) {e.preventDefault()}
	window.ondrop = function(e) {e.preventDefault(); draw(e.dataTransfer.files[0]); }

	function draw(file){

	var img =new Image();
	img.src = URL.createObjectURL(file);;

	var canvas=document.getElementById("image_canvas");
	var ctx = canvas.getContext("2d");

	// call ctx.drawImage when the image got loaded
	img.onload = function() {
	// ctx.drawImage(img, 0, 0);
	ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height); // stretch img to canvas size
	}

	}
	</script>
	</head>
	<body>
	<div>DROP!</div>
	<canvas id="image_canvas" width="200" height="200"></canvas>
	</body>
	</html>