基于Plupload的图片压缩上传

前言

这里的上传工具基于JQuery、Plupload

传送门：Plupload官方、中文文档

为什么要做图片压缩？
现在手机拍照都快10M了，但是有时候图片上传只要看得清楚就可以了，比如上传身份证200k能看清楚，为什么要上传20M？这样做的好处是减少服务器存储压力、减少带宽占用。
为什么要自己做一个压缩图片的？
官方有提供压缩方式：

resize: {width: 100,//指定压缩后图片的宽度，如果没有设置该属性则默认为原始图片的宽度height: 100,//指定压缩后图片的高度，如果没有设置该属性则默认为原始图片的高度crop: true,//是否裁剪图片quality: 60,//压缩后图片的质量，只对jpg格式的图片有效，默认为90。quality可以跟width和height一起使用，但也可以单独使用，单独使用时，压缩后图片的宽高不会变化，但由于质量降低了，所以体积也会变小preserve_headers: false//压缩后是否保留图片的元数据，true为保留，false为不保留,默认为true。删除图片的元数据能使图片的体积减小一点点
}

这边作为Plupload初始化参数传递进入，如果这样做，无论是10M的图片还是10K的图片。都会被压缩。
所以我这边做一个demo来压缩到指定大小的工具。

正文

1、引用

这里的demo没有使用模块化前端工程，只是简单的Script 引入

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><script src="./plupload-2.3.1/js/moxie.js"></script><script src="./plupload-2.3.1/js/plupload.dev.js"></script><script src="./reduce-image-uploader.js"></script><script src="./index.js"></script><title>Title</title>
</head>
<body>
图片压缩上传测试按钮
<button id="upload-btn"> 上传</button>
</body>
</html>

注意： 引用必须按照顺序，后面的会依赖前面的
- 为什么引用plupload.dev.js，而不是其他的。好像是因为plupload.full.min.js内部引用了moxie还是什么的，直接用这个会报错。
- moxie 压缩专用
- plupload 上传专用
- reduce-image-uploader 自己的小工具
- index.js 小工具使用

2、工具

工具代码：

var uploadTool = (function () {var uploader;var option = {};/*** 初始化方法，需要传入配置信息。！开头为必填* @param option{*      !up：dom节点ID或者dom节点，如upload-id 或者 document.getElementById("upload-id")或者 $("#upload-id")[0]*      !successCb:成功的回调，接收一个服务器返回对象successCb(responseObj),如responseObj：{data:"20180227/3fc1d47f951d254ae8b8f9a8b8be1aee.jpg",msg:"上传成功",status:true}*      failCb:失败的回调*      !url:图片上传的路径*      maxSelectIeSize:"10kb",//IE8及以下的能选中最大的图片*      maxSelectSize:"8000kb",//其他浏览器能选中最大的图片*      maxFileSize:200//单位kb,默认压缩到200k以下的再上传,可以修改这个上限* }* @returns {plupload.Uploader}*/var init = function (opt) {var defaultOption = {url:"XXXXXX.do",successCb:function (msg) {console.log(msg)},failCb:function (msg) {console.log(msg)},maxSelectIeSize:"1500kb",maxSelectSize:"8000kb",maxFileSize:200,//压缩后的大小，单位kb}option = $.extend({},opt,defaultOption);uploader = new plupload.Uploader({runtimes : 'html5,flash,silverlight,html4',//压缩使用的运行环境browse_button : option.up, // 绑定的上传按钮，注意IE9以下的如果为隐藏的节点，会失效。在非隐藏的情况下使用 uploader.refresh()激活multi_selection:false,//这个工具不支持多选url : option.url,//url地址，必填。multipart : true,filters : {//过滤器mime_types : [{ title : "Image files", extensions : "jpg,png,jpeg,JPG,PNG,JPEG" }],max_file_size:!$.support.leadingWhitespace? option.maxSelectIeSize:option.maxSelectSize,//IE 8以下的限制大小为1500kb,其他情况下为},init: {//初始化PostInit: function() {},FilesAdded: function(up, files) {//单选，选中文件后立即执行压缩，如果压缩成功会直接上传//这边只在文件添加的时候压缩。压缩后会移除掉文件，然后再次触发压缩的功能，知道符合标准直接上传downSizeImage(uploader,files).fail(option.failCb);},UploadProgress: function(up, file) {// console.log("上传的进度"+file.percent +"%")},FileUploaded:function(uploader,file,responseObject){solutions(responseObject,option.successCb,option.failCb)},Error: function(up, err) {solutions(err,option.successCb,option.failCb)}}});uploader.init();return uploader;}/*** 压缩工具：* @param uploader* @param files* @returns {*}*/var downSizeImage= function (uploader,files) {var $def = $.Deferred();uploader.stop();var imageMaxSize  = option.maxFileSize * 1024;//不处理的图片大小阀值Bvar maxResizeTime  = 10;//最大压缩次数var file = files[0];if(!$.support.leadingWhitespace){//IE6-8的情况不压缩直接上传console.info("IE6-8的情况不压缩直接上传")uploader.start()return $def.resolve({})}if(file.size <= imageMaxSize){//图片在限制之内则直接上传console.info("图片大小为："+file.size+"b，开始上传")uploader.start()return $def.resolve({})}if(file.resizeTime == undefined){//如果没有压缩过，则初始压缩次数为0file.resizeTime = 0}file.resizeTime ++ ;if(file.resizeTime >=  maxResizeTime){//如果超出压缩最大次数，那么直接提交，交给后台拦截，常见Png。如果一个图片一直压缩不了，那么不限制次数，浏览器会炸的console.info("压缩次数达到极限，不能再压缩了，直接上传")uploader.start()return $def.resolve({})}var mOxieLoader = new moxie.image.Image();mOxieLoader.onload = function () {var scare = Math.sqrt(imageMaxSize /mOxieLoader.size)//压缩率var opts = {//其实只有width 和height有用width : mOxieLoader.width * scare,height : mOxieLoader.height * scare,imageType:mOxieLoader.type,size:mOxieLoader.size}console.log("开始压缩！当前图片大小为：",opts.size,"b")mOxieLoader.downsize(opts);var newFile = mOxieLoader.getAsBlob(opts.imageType);newFile.resizeTime = file.resizeTime;$.each(uploader.files,function(i,v){//清除原先的上传队列uploader.removeFile(uploader.files[0].id)})uploader.addFile(newFile)//回炉重造}mOxieLoader.onerror = function () {console.log(arguments)$def.reject({msg:"文件压缩出现错误，请上传小于1M的图片"})}mOxieLoader.load(file.getSource());return $def;}var getResponseObj = function (responseObject) {//获取Response的结果对象//TODO 这边可能会有错误码 需要处理var res = {msg:"未知错误"}if(!responseObject || !responseObject.response){return res}try {res = JSON.parse(responseObject.response)}catch (e){console.error(e)}return res}/*** 处理程序* @param responseObject* @param successCb* @param failCb*/var solutions = function(responseObject,successCb,failCb){//成功失败的处理方式var responseObj = getResponseObj(responseObject);if(responseObj.status){successCb(responseObj)}else{failCb(responseObj)}}/*** 刷新*/var refresh = function () {uploader.refresh()}return {init:init,refresh:refresh}
})()

使用方式：

$(function () {uploadTool.init({up:"upload-btn",maxFileSize:100})
})

3 坑爹

plupload对IE89隐藏模式下的标签绑定或者初始化有问题。

解决方案:想办法让这个绑定的标签显示出来或者用层级样式让其他标签覆盖这个标签。

uploader = new plupload.Uploader(config);
uploader.init();
//显示之后再去调用refresh
uploader.refresh();

坑爹的IE对H5支持不是很好，浏览器连图片大小都识别不出来，你要我怎么办？只能直接上传咯

4 demo下载

http://download.csdn.net/download/xiaolongbaobushibao/10264085

基于Plupload的图片压缩上传相关推荐

基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
[html] 如何使用html5进行图片压缩上传？
[html] 如何使用html5进行图片压缩上传? 1.获取到图片的base64格式: 2.图片加载完成后,把图片转化为canvas: 3.使用canvas的toDataURL按照自己的需要进行压缩: ...
js 图片压缩上传（base64位）以及上传类型分类
一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
JS 图片压缩上传并在iOS中矫正方向
JS 图片压缩上传并在iOS中矫正方向最近在项目中,用到图片上传.如果不进行压缩再上传的话,动辄34兆的图片,上传起来会相当漫长.还有一点就是,在iOS中所拍摄的图片在本地显示是没有问题的,但是上传 ...
web 前端图片优化之--图片压缩上传
移动前端-图片压缩上传实践此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传 ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
写给大忙人看的 - Java中图片压缩上传至MinIO服务器（4）
之前文章已经介绍了 MinIO 的环境搭建,已经对文件的上传下载方法,本篇文章一起与大家来学习图片压缩上传的方法 1.背景最近客户总抱怨 APP 中图片显示较慢, 升级服务器带宽又没有多的预算.查看 ...