jquery获取图片并压缩上传

话不多说,直接上代码:

<input id="input-file" type="file" multiple="multiple" accept="image/*" >


$("#input-file").on("change",function(){
	var filePath = $(this).val(),         //获取到input的value,里面是文件的路径  
	fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),  
	imgBase64 = '',      //存储图片的imgBase64  
	fileObj = document.getElementById('input-file').files[0]; //上传文件的对象,要这样写才行,用jquery写法获取不到对象  
			              
	// 检查是否是图片  
	if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {  
		alert('上传错误,文件格式必须为:png/jpg/jpeg');  
		return;    
	}  
			        
	// 调用函数,对图片进行压缩  
	compress(fileObj,function(imgBase64){  
		imgBase64 = imgBase64;//存储转换后的base64编码  
	});
});


// 对图片进行压缩  
function compress(fileObj, callback){   
	if ( typeof (FileReader) === 'undefined') {    
		console.log("当前浏览器内核不支持base64图标压缩");    
		//调用上传方式不压缩    
		directTurnIntoBase64(fileObj,callback);  
	} else {       
	        var reader = new FileReader();    
		reader.onload = function (e) { //要先确保图片完整获取到,这是个异步事件   

		                	
		    var image = new Image();  
		    image.src=e.target.result;
		    image.onload = function(){    
		        square = {$pic_compress},   //定义画布的大小,也就是图片压缩之后的像素  
		        canvas = document.createElement('canvas'), //创建canvas元素  
		        context = canvas.getContext('2d'),  
		        imageWidth = Math.round(square*image.width),    //压缩图片的大小  
		        imageHeight = Math.round(square*image.height), 
		        data = '';   
		  						
		        canvas.width = imageWidth;
		        canvas.height = imageHeight;   
		        context.clearRect(0, 0, imageWidth, imageHeight);  //在给定矩形内清空一个矩形   
		        context.drawImage(this, 0, 0, imageWidth, imageHeight);    
		        var data = canvas.toDataURL('image/jpeg',0.6);    
		        //压缩完成执行回调    
		        callback(data);    
	            };      
            };    
	reader.readAsDataURL(fileObj);    
			            
	}  
} 

function directTurnIntoBase64(fileObj,callback){  
	var r = new FileReader();  
	// 转成base64  
	r.onload = function(){  
		//变成字符串  
		imgBase64 = r.result;  
		//console.log(imgBase64);  
		callback(imgBase64);  
	}  
	r.readAsDataURL(fileObj);    //转成Base64格式  
}  		

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

专业前端小白

写了这么久文章,1分钱都没收到

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值