三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互，少不了图片的压缩上传，相关的插件有很多，相信大家都有用过，这里我就推荐三款，至于好处就仁者见仁喽：
1.名气最高的WebUploader，由Baidu FEX 团队开发，以H5为主，FLASH为辅，兼容 IE6+，iOS 6+, android 4+，采用大文件分片并发上传，极大的提高了文件上传效率，看了官方文档就知道，能满足你所需要的所有功能，一言以蔽之，大而全；至于缺点，大概就是插件体积太大了，自带样式文件，而且还要依赖jquery类库。详细的教程网上俯拾即是，这里我就附上一段简单的demo：
<!Doctype html> <html lang='en'> <head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/> <title>实验</title> <style> *{ margin:0; padding:0; } .progress{ height:50px; background-color: red; } </style> <link rel="stylesheet" href="assets/webuploader.css"> </head> <body> <div class="myuploader"> <!--用来存放文件信息--> <div class="uploader-list"> </div> <!-- 放置按钮 --> <div class="btns"> <div id="picker">选择文件</div> <!-- <button class="send">开始上传</button> --> </div> </div> <img src="" alt="" /> <div class="state"></div> <div class="progess"></div> <script src="assets/jquery-1.12.0.js"></script> <script src="assets/webuploader.html5only.min.js"></script> <script> // 初始化WebUploader var uploader = WebUploader.create({ // 选完文件后是否自动上传 auto:true, // 文件接收的服务端路径 server:'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮 pick:'#picker', // 只允许选择图片文件 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png' //如果写成image/*会出现响应慢的问题 }, // 配置生成缩略图的选项 thumb:{ // 缩略图的宽高，当取值介于0-1时，被当成百分比使用 width:500, height:250, // 强制转换成指定的类型 type:"image/jpeg", // 图片质量，只有type为image/jpeg的时候才有效 quality:70, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false allowMagnify:true, // 是否允许裁剪 crop:true }, // 是否压缩图片, 默认如果是jpeg文件上传前会压缩，如果是false, 则图片在上传前不进行压缩 compress:{ // 压缩后的尺寸 width: 100, height: 100, // 图片质量，只有type为image/jpeg的时候才有效。 quality: 90, // 是否允许放大，如果想要生成小图的时候不失真，此选项应该设置为false allowMagnify: false, // 是否允许裁剪 crop: false, // 是否保留头部meta信息 preserveHeaders: true, // 如果发现压缩后文件大小比原来还大，则使用原来图片，此属性可能会影响图片自动纠正功能 noCompressIfLarger: false, // 单位字节，如果图片大小小于此值，不会采用压缩 compressSize: 0 } }); // 监听fileQueued事件来处理UI逻辑，当有一批文件被添加进队列改用filesQueued uploader.on('fileQueued', function( file ) { // 可以在控制台中查看file对象的详细信息 console.log(file); // 创建缩略图 makeThumb，还可以写成(file,callback,width,height) uploader.makeThumb(file,function(error,src) { if (error) { console.log("不能预览"); return; }else{ $("img").attr('src',src); } }); }); // 文件上传开始 uploader.on('startUpload', function(file) { $(".state").text('开始'); }); // 文件上传进度 uploader.on('uploadProgress', function(file,percentage) { $(".progress").css('width', percentage * 100 + "%" ); }); // 文件上传成功 uploader.on('uploadSuccess', function(file) { console.log("成功"); $(".state").text('已上传'); }); // 文件上传失败 uploader.on('uploadError', function(file) { console.log("失败"); $(".state").text('上传出错'); // 获取文件统计信息 console.log(uploader.getStats()); // console.log(uploader.getFiles('error')); }); // 文件上传完成 uploader.on('uploadComplete', function(file) { console.log("完成"); $(".progress").fadeOut(); }); </script> </body> </html>
2.移动端的插件，如果能脱离jquery，并且能满足项目的基本需求就再好不过了，这里像localResizeIMG就做得不错，它有4个历史版本，建议引入最新稳定版本localResizeIMG4，demo如下（样式要自己写）：
<!Doctype html> <html lang='en'> <head> <meta charset='utf-8'/> <meta name='viewport' content='width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no'/> <title>实验</title> <style> *{ margin:0; padding:0; } </style> </head> <body> <!-- capture="camera"可以出现拍照；accept="image/*"仅接受图片 --> <input type="file" id="file" name="logo" capture="camera" > <!-- 一般情况下引入lrz.bundle.js，但绝对不要删除目录下的*.chunk.js，这些文件分别对应了IOS和Android的兼容代码，检测到符合环境时会自动引入，lrz.all.bundle.js是包含了所有引用了，莫名其妙的问题下就引用这个吧 --> <script src="assets/lrz.bundle.js"></script> <script> // 通过change事件可以得到用户选择的图片 document.querySelector("input").addEventListener("change",function(){ // this.files[0]就是用户选择的文件，当做参数传入lrz(file, [options])，或者直接传入图片路径 // [options]中的width表示图片最大不超过的宽度，默认为原图宽度，height不设时会适应宽度；quality表示图片压缩质量，取值 0 - 1，默认为0.7；fieldName表示后端接收的字段名，默认为 file lrz(this.files[0], {width: 1024}) // 上述返回值是一个promise对象，后面可以接then(rst) catch(err) always() .then(function(rst){ // 通过图片的预加载来实现图片预览 var img = new Image();// 创建一个Image对象 // 先绑定onload事件，然后再给src赋值，原因好像是为了解决ie，opera下的兼容问题 // 图片加载完毕时异步调用 img.onload = function () { console.log("图片加载完毕") img.onload = null; // 解决内存泄漏，同时避免动态图片的事件多次触发 document.body.appendChild(img); }; img.src = rst.base64;// 载入生成后的图片base64 // 返回rst便于链式调用 return rst; }) .then(function(rst){ // 除了以上的内容，rst.formData表示后端可处理的数据；rst.file表示压缩后的对象；rst.fileLen表示生成后的图片大小；rst.base64Len表示生成后的base的大小；rst.origin表示原始的对象，包括大小，日期等信息 console.log(rst.formData) //可以在这里写ajax的上传代码，原生和jquery的都可以 // 返回rst便于链式调用 return rst; }) .catch(function(err){ // 万一出错了，这里可以捕捉到错误信息，而且以上的then都不会执行 alert(err); }) .always(function(){ // 不管是成功失败，这里都会执行 console.log("执行完成") }) }) </script> </body> </html>
3.以上两款优缺点一目了然，本人公司用的是LUploader，纯原生js写的，不依赖任何类库，压缩后的js文件只有5k，实现图片压缩上传只需三步：
(1)在html页面中引入input标签，通过自定义属性data-LUploader绑定点击触发的标签id：
<div class="LUploader" id="demo1"> <div class="LUploader-container"> <input data-LUploader='demo1' data-form-file='basestr' data-upload-type='front' type="file" /> <ul class="LUploader-list"></ul> </div> <div> <div class="icon"></div> <p>单击上传</p> </div> </div>
(2)将样式文件和js文件引入到页面中：
<link rel="stylesheet" href="css/LUploader.css"> <script src="js/LUploader.js"></script>
(3)js脚本中初始化插件：
new LUploader(这里放需要绑定的input对象作为参数, { url: '',//post请求地址 multiple: false,//是否一次上传多个文件 默认false maxsize: 102400,//忽略压缩操作的文件体积上限 默认100kb accept: 'image/jpg,image/jpeg,image/png',//如果写成image/*会出现响应慢的问题 quality: 0.1,//压缩比 默认0.1 范围0.1-1.0 越小压缩率越大 showsize:false//是否显示原始文件大小 默认false });
