站长资源
全栈工程师站点

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

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

我们经常看到图片上传之后有预览,而一般的表单上传组件是获取不到文件真实路径的,那么如何实现,当然可以配合后端,存储之后再进行显示,这样不免会浪费资源。当然也有使用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;
}

得到如图所示结构:

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

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);//五个参数,第一个要写入的图像,后面的是坐标以及宽高

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


免费下载  在线演示  
×

站长资源极速下载通道: 利用canvas配合FileReader()更好的实现图片上传预览功能

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » 利用canvas配合FileReader()更好的实现图片上传预览功能

评论 抢沙发

评论前必须登录!