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