html5上传图片样式修改功能实现

在这个功能里要做的有以下几个步骤：

1、两个元素，一个img元素作为背景，一个input type=‘file’做功能，两方位置大小相同重合，样式略去：

<img id="input_img" src="../images/icons/detect_face.png" />
<input id="input_file" accept="image/*" type="file" onfocus="this.blur()" />

2、监听input的change事件

var currentImage = '';
oInputFile.addEventListener('change', function(e) {
	currentImage = e.target.files[0];
	var reader = new FileReader();
	reader.readAsDataURL(currentImage);
	reader.onload = function(file) {
		document.getElementById('input_img').src = this.result;
		if(file.total > 1024 * 1024) {
//如果文件过大，则进行压缩
			compressImage(this.result);
		} 
	} 
})

事件中会返回fileList列表，包含了上传文件的相关信息；

FileRader：允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。

属性：

error：表示在读取文件时发生的错误；

readyState：表示FileReader状态的数字，,0：empty，还没有加载任何数据；1：loading，数据正在被加载；2：done，已完成全部的读取请求

result：文件的内容，在读取操作完成后可以获取到的属性

事件处理：

onabort：读取操作被中断时触发；

onerror：读取操作发生错误时触发；

onload：读取操作完成时触发；

onloadstart：读取操作开始时触发；

onloadend：读取操作结束时（成功or失败）触发；

onprogress：在读取Blob时触发。

方法：

abort（）：中止读取操作；

readAsArrayBuffer（）：

readAsBinaryString（）：

readAsDataUrl（）：

readAsText（）：

3、压缩文件

//压缩图片
function compressImage(base64) {
	var canvas = document.createElement('canvas');
	var context = canvas.getContext('2d');
	var img = new Image();
	img.src = base64;
	img.onload = function() {
		var originWidth = this.width;
		var originHeight = this.height;
		var maxWidth = 1000,
			maxHeight = 1000;
		var targetWidth = originWidth,
			targetHeight = originHeight;
		if(originWidth > maxWidth || originHeight > maxHeight) {
			if(originWidth / originHeight > maxWidth / maxHeight) {
				targetWidth = maxWidth;
				targetHeight = Math.round(maxWidth * (originHeight / originWidth));
			} else {
				targetHeight = maxHeight;
				targetWidth = Math.round(maxHeight * (originWidth / originHeight));
			}
		}
		canvas.width = targetWidth;
		canvas.height = targetHeight;

		context.clearRect(0, 0, targetWidth, targetHeight);

		context.drawImage(img, 0, 0, targetWidth, targetHeight);

		var uploadImage = canvas.toDataURL();
	}
}

主要利用canvas对图片进行压缩；

使用toDataURL方法获取canvas的base64格式。

OK，就这样啦。。。

html5上传图片样式修改功能实现

猜你喜欢