首页 > 代码库 > 原生js 对图片的压缩上传

原生js 对图片的压缩上传

小石头原创,转载请注明出处,谢谢~!

var jsoncode=(function(){	/*	imgzip:图片压缩,	*	json:	*		file 	:必须。file类型的input按钮的选择器(#id,.class,input[type=file]...)	*		fileStyle:可选。是否设置按钮的样式。默认为false	*		widt 	:可选。被压缩后的图片宽度	*		quality :可选。被压缩后的图片质量	*		type 	:可选。图片格式(仅支持png-无压缩,jpeg/jpg,可压缩)	*		error 	:可选。错误信息	*		success :可选。成功信息,包图片流等。返回值是一个对象	*			imgzip({			file 	:‘#fileid‘,			fileStyle:true,			width 	:‘100‘|100|‘50%‘,			quality :‘0.3‘|0.3,			error 	:function(error){				console.log(error);			},			success :function(data){				console.log(data);			}		});		返回值:		Object{			name: "32",									原始图片的名称,不包含后缀			nameSuffix: ".jpg",							原始图片的后缀名			type: "image/jpeg",							原始图片类型			size: 183844,								原始图片大小			width: 590									原始图片宽度			height: 470,								原始图片高度			url: "data:image/jpeg;base64,...",			原始图片路径			flow: "",									原始图片流			img: imgDom,								原始图片(保存在img中)			quality: 0.1,								图片压缩质量			newType: "image/jpeg",						压缩后图片格式			newWidth: 590,								压缩后图片高度			newHeight: 470,								压缩后图片高度			newUrl: "data:image/jpeg;base64,...",		压缩后图片路径			newFlow: "",								压缩后图片流			canvas: canvasDom,							压缩后图片(保存在canvas中)			localTimeStamp: 1413531845,					本地时间戳		}	*/	this.imgzip=function(obj){		//获取file按钮		if (obj.file) {			imgzip.file=obj.file;		}else{			return console.log(‘selector is null‘);		}		//获取文件按钮对象		var input=document.querySelector(imgzip.file);			//给文件按钮添加accept属性值:image/*(表示只能选择图片类型的文件)			input.setAttribute(‘accept‘,‘image/*‘);		var file=null;		//是否重置input样式		imgzip.fileStyle=obj.fileStyle||false;		if (!imgzip.fileStyle) {			file=input;		}else{			//克隆input			file=input.cloneNode(true);			//创建父盒子模型			var label=document.createElement(‘label‘);			//获取属性placeholder的值,作为按钮名称			var text=file.getAttribute(‘placeholder‘)||‘选择图片‘;				//创建文本节点				textNode=document.createTextNode(text);				//将克隆的input添加到盒子中				label.appendChild(file);				label.appendChild(textNode);								//将原来的input替换为带有盒子div的input				input.parentNode.replaceChild(label,input);				//设置盒子class				label.setAttribute(‘class‘,‘fileInput‘);				//定义盒子样式			var style=document.createElement(‘style‘);				style.setAttribute(‘type‘,‘text/css‘);				document.querySelector(‘head‘).appendChild(style);				style.innerHTML=‘.fileInput{color:#fff;text-align:center;line-height:32px;font-size:14px;border-radius:2px;cursor:pointer;display:inline-block;width:100px;height:32px;background-color:rgb(56,121,217);}‘;				style.innerHTML+=‘.fileInput input[type=file]{width:100%;display:none;}‘;		}		//接收错误信息		imgzip.error=obj.error||function(){};		//返回图片信息		imgzip.success=obj.success||function(){};		//获取用户图片格式		if (/png/.test(obj.type)) {			imgzip.type=‘image/png‘;		}else{			imgzip.type=‘image/jpeg‘;		}		//获取用户要设置的图片宽度		imgzip.width=obj.width||null;		//获取图片压缩比例		if (parseFloat(obj.quality)) {			imgzip.quality=parseFloat(obj.quality);		}else{			imgzip.quality=0.9;		}				console.log(imgzip.quality);		//判断选择器是否正确		if (file==null) {			imgzip.error(fileSelector+‘ is null‘);			return false;		}else if(file.type!=‘file‘){			imgzip.error(fileSelector+‘ is not file‘);			return false;		}else{			file.addEventListener(‘change‘,this.read,false);		}	}	//读取文件流	this.read=function(event){		//读取到的文件		var file=this.files[0];		//当取消选择的图片时处理错误		if (file===undefined)return false;		//返回的文件对象		var fileobj={};		//获取图片类型		fileobj.type=file.type;		//获取图片名称	    fileobj.name=file.name.substring(0,file.name.lastIndexOf(‘.‘));	    //后缀名	    fileobj.nameSuffix=file.name.substring(file.name.lastIndexOf(‘.‘),file.name.length);	    //获取图片大小	    fileobj.size=file.size;	    		//图片新格式		fileobj.newType=imgzip.type;		//获取图片压缩质量		fileobj.quality=imgzip.quality;	    //创建图片流对象	    var reader = new FileReader();    	reader.readAsDataURL(file);    	reader.onerror=function(){    		console.log(reader.error)    	}    	//图片加载完成时获取信息	    reader.onload=function(e){	    		    	//时间戳	    	var strTimeStamp=‘‘+e.timeStamp;	    	strTimeStamp=strTimeStamp.substring(0,strTimeStamp.length-3);	    	fileobj.localTimeStamp=parseInt(strTimeStamp);	    	//获取base64文件流	        fileobj.url=reader.result;	        //获取纯图片二进制流	        fileobj.flow=reader.result.replace(‘data:‘+fileobj.type+‘;base64,‘,‘‘);	        //创建img对象			var img=new Image();			//获取img内容			img.src=fileobj.url;			fileobj.img=img;			//获取图像大小			fileobj.width=img.width;			fileobj.height=img.height;			//图片宽高比例 宽/高			var scale=img.width/img.height;			//图像新大小			if (imgzip.width==null) {				fileobj.newWidth=img.width;				fileobj.newHeight=img.height;			}else if (/%$/.test(imgzip.width)){				var percent=parseInt(imgzip.width.replace(/%$/,‘‘));				fileobj.newWidth=(img.width*percent)/100;				fileobj.newHeight=(img.width*percent)/(scale*100);			}else{				fileobj.newWidth=imgzip.width;				fileobj.newHeight=imgzip.width/scale;			}			//创建画布			var canvas=document.createElement(‘canvas‘);			//确定画布的宽高		    canvas.width=fileobj.newWidth;		    canvas.height=fileobj.newHeight;		    //创建二维空间			var cxt=canvas.getContext(‘2d‘);						//将图像画到画布上		    cxt.drawImage(img, 0, 0, fileobj.newWidth, fileobj.newHeight);		    fileobj.canvas=canvas;		    //获取新图像的路径		    fileobj.newUrl=canvas.toDataURL(fileobj.newType, fileobj.quality);		    //获取新的图片流媒体		    fileobj.newFlow=fileobj.newUrl.replace(‘data:‘+fileobj.newType+‘;base64,‘,‘‘);		    //返回fileobj对象		    return imgzip.success(fileobj);		}	}
         return this;
})(jsoncode);window.jsoncode=jsoncode;

 

 

原生js 对图片的压缩上传