mfyz · April 8, 2014 21:49 · CleverleyDone · Jul 13, 2021 · mfyz · Jul 18, 2021
diff --git a/resize_preview.html b/resize_preview.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Angular HTML5 Preview, Crop And Upload</title>
 	<style>
 		body {
 			padding: 50px;
 			font: 16px Helvetica;
 		}

 		.dragArea {
 			background-color: #efefef;
 			border: 3px dashed #cccccc;
 			border-radius: 10px;
 			text-align: center;
 			padding: 50px;
 		}

 		.dragArea.over {
 			border-color: #ff0000;
 			background-color: #FFE9EA;
 		}

 		.resultImageWrapper {
 			display: none;
 			margin-top: 50px;
 			text-align: center;
 		}

 		#resultImage {
 			box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
 		}
 	</style>
 </head>
 <body>

 <div class="dragArea">
 	<h3>Drag & Drop File Here</h3>
 	<h4>Or Select File:</h4>
 	<div>
 		<input type="file" id="imageFile"/>
 	</div>
 </div>

 <div class="resultImageWrapper">
 	<img src="" alt="" id="resultImage" width="500" />
 </div>

 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 <script>
 	// Required for drag and drop file access
 	jQuery.event.props.push('dataTransfer');

 	$(function(){
 		var dropTimer;
 		var dropTarget = $('.dragArea');
 		var fileInput = $('#imageFile');

 		dropTarget.on("dragover", function(event) {
 			clearTimeout(dropTimer);
 			if (event.currentTarget == dropTarget[0]) {
 				dropTarget.addClass('over');
 			}

 			return false; // Required for drop to work
 		});

 		dropTarget.on('dragleave', function(event) {
 			if (event.currentTarget == dropTarget[0]) {
 				dropTimer = setTimeout(function() {
 					dropTarget.removeClass('over');
 				}, 200);
 			}
 		});

 		handleDrop = function(files){
 			dropTarget.removeClass('over');

 			var file = files[0]; // Multiple files can be dropped. Lets only deal with the "first" one.

 			if (file.type.match('image.*')) {
 				resizeImage(file, 1000, function(result) {
 					$('#resultImage').attr('src', result);
 					$('.resultImageWrapper').show();
 				});
 			} else {
 				alert("That file wasn't an image.");
 			}
 		};

 		dropTarget.on('drop', function(event) {
 			event.preventDefault(); // Or else the browser will open the file
 			handleDrop(event.dataTransfer.files);
 		});

 		fileInput.on('change', function(event) {
 			handleDrop(event.target.files);
 		});

 		resizeImage = function(file, size, callback) {
 			var fileTracker = new FileReader;
 			fileTracker.onload = function() {
 				var image = new Image();
 				image.onload = function(){
 					var canvas = document.createElement("canvas");
 					/*
 					if(image.height > size) {
 						image.width *= size / image.height;
 						image.height = size;
 					}
 					*/
 					if(image.width > size) {
 						image.height *= size / image.width;
 						image.width = size;
 					}
 					var ctx = canvas.getContext("2d");
 					ctx.clearRect(0, 0, canvas.width, canvas.height);
 					canvas.width = image.width;
 					canvas.height = image.height;
 					ctx.drawImage(image, 0, 0, image.width, image.height);
 					callback(canvas.toDataURL("image/png"));
 				};
 				image.src = this.result;
 			}

 			fileTracker.readAsDataURL(file);

 			fileTracker.onabort = function() {
 				alert("The upload was aborted.");
 			}

 			fileTracker.onerror = function() {
 				alert("An error occured while reading the file.");
 			}
 		};
 	});
 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Angular HTML5 Preview, Crop And Upload</title>
	<style>
	body {
	padding: 50px;
	font: 16px Helvetica;
	}

	.dragArea {
	background-color: #efefef;
	border: 3px dashed #cccccc;
	border-radius: 10px;
	text-align: center;
	padding: 50px;
	}

	.dragArea.over {
	border-color: #ff0000;
	background-color: #FFE9EA;
	}

	.resultImageWrapper {
	display: none;
	margin-top: 50px;
	text-align: center;
	}

	#resultImage {
	box-shadow: rgba(0,0,0,0.4) 0 2px 5px;
	}
	</style>
	</head>
	<body>

	<div class="dragArea">
	<h3>Drag & Drop File Here</h3>
	<h4>Or Select File:</h4>
	<div>
	<input type="file" id="imageFile"/>
	</div>
	</div>

	<div class="resultImageWrapper">
	<img src="" alt="" id="resultImage" width="500" />
	</div>

	<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<script>
	// Required for drag and drop file access
	jQuery.event.props.push('dataTransfer');

	$(function(){
	var dropTimer;
	var dropTarget = $('.dragArea');
	var fileInput = $('#imageFile');

	dropTarget.on("dragover", function(event) {
	clearTimeout(dropTimer);
	if (event.currentTarget == dropTarget[0]) {
	dropTarget.addClass('over');
	}

	return false; // Required for drop to work
	});

	dropTarget.on('dragleave', function(event) {
	if (event.currentTarget == dropTarget[0]) {
	dropTimer = setTimeout(function() {
	dropTarget.removeClass('over');
	}, 200);
	}
	});

	handleDrop = function(files){
	dropTarget.removeClass('over');

	var file = files[0]; // Multiple files can be dropped. Lets only deal with the "first" one.

	if (file.type.match('image.*')) {
	resizeImage(file, 1000, function(result) {
	$('#resultImage').attr('src', result);
	$('.resultImageWrapper').show();
	});
	} else {
	alert("That file wasn't an image.");
	}
	};

	dropTarget.on('drop', function(event) {
	event.preventDefault(); // Or else the browser will open the file
	handleDrop(event.dataTransfer.files);
	});

	fileInput.on('change', function(event) {
	handleDrop(event.target.files);
	});

	resizeImage = function(file, size, callback) {
	var fileTracker = new FileReader;
	fileTracker.onload = function() {
	var image = new Image();
	image.onload = function(){
	var canvas = document.createElement("canvas");
	/*
	if(image.height > size) {
	image.width *= size / image.height;
	image.height = size;
	}
	*/
	if(image.width > size) {
	image.height *= size / image.width;
	image.width = size;
	}
	var ctx = canvas.getContext("2d");
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	canvas.width = image.width;
	canvas.height = image.height;
	ctx.drawImage(image, 0, 0, image.width, image.height);
	callback(canvas.toDataURL("image/png"));
	};
	image.src = this.result;
	}

	fileTracker.readAsDataURL(file);

	fileTracker.onabort = function() {
	alert("The upload was aborted.");
	}

	fileTracker.onerror = function() {
	alert("An error occured while reading the file.");
	}
	};
	});
	</script>

	</body>
	</html>