H5单文件压缩插件
单文件压缩上传
<input type="file" id="file">
构造函数
function UpFileImg(options){ var options = options || { el:'', compressSize:640, datatype:'base64', success:function(val){} }; var that = this; // 读取文件 this.setFilesReader = function(file){ var reader = new window.FileReader(); var fileSize = Math.round(file.size/1024/1024); var that = this; reader.readAsDataURL(file); reader.onload = function(e) { that.compress(this.result,fileSize); }; }; // 压缩文件 this.compress = function(res, fileSize){ var img = new Image(); var maxW = options.compressSize; //压缩后大小 var that = this; img.src = res; img.onload = function () { var cvs = document.createElement('canvas'), ctx = cvs.getContext('2d'); if(img.width > maxW) { img.height *= maxW / img.width; img.width = maxW; } cvs.width = img.width; cvs.height = img.height; ctx.clearRect(0, 0, cvs.width, cvs.height); ctx.drawImage(img, 0, 0, img.width, img.height); // 设置压缩比 var compressRate = that.getCompressRate(1,fileSize); // 压缩 var dataUrl = cvs.toDataURL('image/jpeg', compressRate); if(options.datatype === 'blob'){ var dataUrl = that.dataURItoBlob(dataUrl); } // 成功后回调 that.compressCallblak(options.success,dataUrl); }; }; // 压缩后回调函数 this.compressCallblak = function(fun,val){ fun(val); }; // 计算压缩比 this.getCompressRate = function(allowMaxSize,fileSize){ var compressRate = 1; if(fileSize/allowMaxSize > 4){ compressRate = 0.5; } else if(fileSize/allowMaxSize >3){ compressRate = 0.6; } else if(fileSize/allowMaxSize >2){ compressRate = 0.7; } else if(fileSize > allowMaxSize){ compressRate = 0.8; } else{ compressRate = 0.9; } return compressRate; }; //base64转blob this.dataURItoBlob = function(base64Data){ var byteString; if (base64Data.split(',')[0].indexOf('base64') >= 0){ byteString = atob(base64Data.split(',')[1]); } else{ byteString = unescape(base64Data.split(',')[1]); } var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0]; var ia = new Uint8Array(byteString.length); for (var i = 0; i < byteString.length; i++) { ia[i] = byteString.charCodeAt(i); } return new Blob([ia], {type:mimeString}); } document.getElementById(options.el).onchange = function (){ var f = this.files[0]; that.setFilesReader(f); }; };
示例:(转为blob对象后使用ajax上传)
var fileImg = new UpFileImg({ el:'file', //绑定id compressSize:700, //默认640 datatype:'blob', //默认转换为base64 success:function(data,name){ // 回调 console.log(data); console.log(name); var fd = new FormData(); // file_key为上传文件后台对应的key也就相当于input的name, // data为bolo对象, // name为上传文件的名称 fd.append("file_key", data, name); $.ajax({ url: '上传地址', type: 'POST', data: fd, processData: false, // 必须 contentType: false, // 必须 dataType: 'json', success:function(data){ console.log(data); } }); } });
名称 | 默认值 | 是否必传 | 描述 |
el | 无 | 是 | 对应input的ID |
compressSize | 640 | 否 | 压缩后最大宽度 |
datatype | base64 | 否 | 回调函数返回值类型,默认返回base64,可以设置为blob,配合ajax进行上传 |
success | 无 | 是 | 回调函数返回文件名称,与压缩后文件(base64或者blob) |