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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zgdyff.html