首页 > 代码库 > 原生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 对图片的压缩上传
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。