html HTML5 FileReader + canvas调整器，用于在使用jquery上传图像之前调整大小和预览。

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html HTML5 FileReader + canvas调整器，用于在使用jquery上传图像之前调整大小和预览。相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于html HTML5 FileReader + canvas调整器，用于在使用jquery上传图像之前调整大小和预览。的主要内容，如果未能解决你的问题，请参考以下文章

HTML5 FileReader对象

Data Url生成工具之HTML5 FileReader实现

HTML5 fileReader 随堂笔记

HTML5 文件 API：FileReader.readAsText() 返回“未定义”

html5 fileReader -- 如何只读取文件的前 N ​​个字符？

html5中利用FileReader来读取文件。