在这个功能里要做的有以下几个步骤:
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,就这样啦。。。