利用canvas配合FileReader()更好的实现图片上传预览功能

我们经常看到图片上传之后有预览，而一般的表单上传组件是获取不到文件真实路径的，那么如何实现，当然可以配合后端，存储之后再进行显示，这样不免会浪费资源。当然也有使用createObjectURL()方法的，也有使用html5的FileReader()的。都可以实现同样的功能。

今天我们讲的是用canvas配合FileReader()来实现该效果

本人测试兼容性方面不是很好，在一些安卓机了也有bug，并且对于较大图片也不建议使用，所以这里只做实例讲解之用，不建议使用在项目上

有人说你既然用FileReader()为什么要用canvas，不是多此一举

我们发现在FileReader()实际填充的是图形base64编码，是网页一下变的很大，当然用户也看不到哈，不过我就是不舒服怎么啦！o(∩_∩)o 哈哈

上传的dom结构不解释了，就一个现实图片框，和一个上传按钮，直接上代码

<div class="box">
    <canvas id="cvs" width="200" height="200">
    </canvas>
    <span class="btn upload">
        上传图片 
        <input type="file" class="upload_pic" id="upload">
    </span>
</div>

加上点css样式

.box{
     width: 300px;
     height: auto;
     overflow: hidden;
     margin: 20px auto;
     color: #FFFFFF;
}
.box .btn{
     width: 100%;
     height: 40px;
     line-height: 40px;
     text-align: center;
     background: #45B6F7;
     display: block;
     font-size: 16px;
     border-radius: 5px;
}
.upload{
     float: left;
     position: relative;
}
.upload_pic{
     display: block;
     width: 100%;
     height: 40px;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     border-radius: 5px;
}
#cvs{
	border: 1px solid #000;
	margin:20px 0 20px 50px;
}

得到如图所示结构：

JS部分先贴出代码，再进行讲解，我尽量把代码注释写的详尽一些

//获取上传按钮
var input = document.getElementById("upload"); 
//判断一下浏览器支不支持FileReader"; 
if(typeof FileReader==='undefined'){ 
     input.setAttribute('disabled','disabled'); 
}else{ 
     input.addEventListener('change',readFile,false); 
}
function readFile(){ 
	var file = this.files[0];//获取上传文件列表中第一个文件
	if(!/image\/\w+/.test(file.type)){
	//file.type获取的是文件的MIME媒体类型，不知道的可以去查询了解，就知道为何用正则这么判断了
		alert("文件必须为图片！");
		return false; 
	} 
	var reader = new FileReader();//实例一个文件对象
	reader.readAsDataURL(file);//把上传的文件转换成url
	//当文件读取成功便可以调取上传的接口
	reader.onload = function(e){ 
		//console.log(e.target.result);
		//打印出来可以看到是图片base64编码，稍微操作一下就可以填充页面或存储了，我们忽略，且往下看
		
		//实例image对象
		var image = new Image();
		// 设置src属性
		image.src = e.target.result;
		// 绑定load事件处理器，加载完成后执行，避免同步问题
		image.onload = function(){ 
			// 获取 canvas DOM 对象 
			var canvas = document.getElementById("cvs"); 
			// 获取 canvas的 2d 环境对象, 
			var ctx = canvas.getContext("2d"); 
			// canvas清屏 
			ctx.clearRect(0, 0, canvas.width, canvas.height); 
			ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
			// 我们看源码可以看到image并没有加入到dom之中
		};  
	}
};

上面的代码上我都写上了具体的注释

说一下大家可能不理解的几个点

typeof//判断参数类型，这里用来判断浏览器是否支持
file.type;//获取的是文件的MIME媒体类型，之后用正则去判断是否为图片
FileReader();//对象，用于将文件内容读入内存
readAsDataURL();//将文件转成base64字符串
image.onload();//防止加载没结束就开始写入
clearRect(x,y,width,height);//四个参数，清理画布
drawImage(img,x,y,width,height);//五个参数，第一个要写入的图像，后面的是坐标以及宽高

本文由站长资源原创首发，转载请注明出处