原生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;