upgrade to 2.1.0

上传图片新增在前端进行压缩处理。

Author: rockliuxn

README.md

@@ -45,7 +45,7 @@ __url__
 
 上传接口地址，必选。
 
-__headers__ (新增)
+__headers__ (v2.0.9 新增)
 
 json对象，上传请求的头部信息，可选
 
@@ -61,6 +61,10 @@ __connectionCount__
 
 允许同时上传的文件数量，可选，默认值是3
 
+__compress__(v2.1.0 新增)
+
+上传图片在前端是否进行压缩，可选，默认为true
+
 ####方法
 
 uploader实例会暴露一些公共方法：

lib/uploader.js

@@ -33,7 +33,8 @@ Uploader = (function(superClass) {
     headers: null,
     params: null,
     fileKey: 'upload_file',
-    connectionCount: 3
+    connectionCount: 3,
+    compress: true
   };
 
   Uploader.prototype._init = function() {
@@ -70,7 +71,8 @@ Uploader = (function(superClass) {
   })();
 
   Uploader.prototype.upload = function(file, opts) {
-    var f, i, key, len;
+    var f, i, key, len, _this;
+    _this = this;
     if (opts == null) {
       opts = {};
     }
@@ -102,8 +104,12 @@ Uploader = (function(superClass) {
     if (this.triggerHandler('beforeupload', [file]) === false) {
       return;
     }
-    this.files.push(file);
-    this._xhrUpload(file);
+
+    this.compressImageFile(file.obj ,function(blob_data){
+      file.obj = blob_data;
+      _this.files.push(file);
+      _this._xhrUpload(file);
+    });
     return this.uploading = true;
   };
 
@@ -123,7 +129,8 @@ Uploader = (function(superClass) {
       name: name,
       size: (ref1 = fileObj.fileSize) != null ? ref1 : fileObj.size,
       ext: name ? name.split('.').pop().toLowerCase() : '',
-      obj: fileObj
+      obj: fileObj,
+      compress: this.opts.compress
     };
   };
 
@@ -234,6 +241,90 @@ Uploader = (function(superClass) {
     }
   };
 
+  Uploader.prototype.compressImageFile = function(fileObj, callback) {
+    var fileReader, img;
+    if (!$.isFunction(callback)) {
+      return;
+    }
+
+    if(!this.opts.compress){
+      return callback(fileObj);
+    }
+
+    img = new Image();
+
+    if (window.FileReader && FileReader.prototype.readAsDataURL && /^image/.test(fileObj.type)) {
+      fileReader = new FileReader();
+      var _this = this;
+      fileReader.onload = function(e) {
+        img.src = e.target.result;
+
+        //resize the image using canvas
+        var canvas = document.createElement("canvas");
+        var ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0);
+        var MAX_WIDTH = 800;
+        var MAX_HEIGHT = 800;
+        var width = img.width;
+        var height = img.height;
+
+        // less than the limited size of the returned directly
+        if (width < MAX_WIDTH && height < MAX_HEIGHT) {
+          return callback(fileObj);
+        }
+
+        if (width > height) {
+          if (width > MAX_WIDTH) {
+            height *= MAX_WIDTH / width;
+            width = MAX_WIDTH;
+          }
+        } else {
+          if (height > MAX_HEIGHT) {
+            width *= MAX_HEIGHT / height;
+            height = MAX_HEIGHT;
+          }
+        }
+        canvas.width = width;
+        canvas.height = height;
+        var ctx = canvas.getContext("2d");
+        ctx.drawImage(img, 0, 0, width, height);
+
+        //change the dataUrl to blob data for uploading to server
+        var dataURL = canvas.toDataURL('image/jpeg');
+        var blob = _this.dataURItoBlob(dataURL);
+
+        return callback(blob);
+
+      };
+      return fileReader.readAsDataURL(fileObj);
+    } else {
+      return callback(fileObj);
+    }
+  };
+
+  Uploader.prototype.dataURItoBlob = function(dataURI) {
+    // convert base64/URLEncoded data component to raw binary data held in a string
+    var byteString;
+    if (dataURI.split(',')[0].indexOf('base64') >= 0)
+      byteString = atob(dataURI.split(',')[1]);
+    else
+      byteString = unescape(dataURI.split(',')[1]);
+
+    // separate out the mime component
+    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
+
+    // write the bytes of the string to a typed array
+    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
+    });
+
+  };
+
   Uploader.prototype.destroy = function() {
     var file, i, len, ref;
     this.queue.length = 0;