初始化项目

UI/Scripts/jquery.imagecompress.js

@@ -0,0 +1,136 @@
++function ($) {
+  'use strict';
+
+  var successCount = 0;
+  /**
+   * 闭包中的构造方法
+   * @param evt 上传文件域的change事件对象
+   * @param options 用户定义参数（图片压缩质量，处理完成回调函数，图片输出格式）
+   */
+  var ImageCompress = function (evt, options) {
+    var that = this;
+    
+    //读取图片
+    var originalImage = this.readFile(evt, options.onloadStart, function(){
+      if(typeof options.onloadEnd === 'function'){
+        options.onloadEnd(this);
+      }
+
+      if(typeof options.oncompressStart === 'function'){
+        options.oncompressStart(this);
+      }
+
+      //读取完成，压缩图片
+      var compressImage = that.compress(this, options.quality, options.outputFormat);
+
+      if(typeof options.oncompressEnd === 'function'){
+        options.oncompressEnd(compressImage);
+      }
+
+      successCount++;
+
+      if(typeof options.callback === 'function' && successCount == length){
+          options.callback(compressImage);
+          successCount = 0;
+      }
+
+      return compressImage;
+    });
+
+
+  }
+
+  // 原型方法
+  /**
+   * 压缩图片
+   * @param imageObj 图片对象
+   * @param quality 压缩质量
+   * @param outputFormat 图片输出格式
+   * return returnImageObj 返回压缩后的图片对象
+   */
+  ImageCompress.prototype.compress = function(imageObj, quality, outputFormat){
+    var mimeType = "image/jpeg";
+    if(outputFormat!=undefined && outputFormat=="png"){
+      mimeType = "image/png";
+    }
+
+    var cvs = document.createElement('canvas');
+    //naturalWidth真实图片的宽度
+
+    cvs.width = imageObj.naturalWidth;
+    cvs.height = imageObj.naturalHeight;
+    var ctx = cvs.getContext("2d").drawImage(imageObj, 0, 0);
+    var newImageData = cvs.toDataURL(mimeType, quality/100);
+    var returnImageObj = new Image();
+    returnImageObj.src = newImageData;
+
+    return returnImageObj;
+  }
+
+  /**
+   * 读取图片
+   * @param evt 上传文件域的change事件对象
+   * @param onloadCallback 当文件读取完毕后的回调
+   */
+  ImageCompress.prototype.readFile = function(evt, onloadStart, onloadCallback) {
+    var files = evt.target.files;
+    var length = files.length;
+
+    for (var i = 0, file; file = files[i]; i++) {
+      // 只处理图片
+      if (!file.type.match('image.*')) {
+        continue;
+      }
+      if(typeof onloadStart === 'function'){
+        onloadStart(file);
+      }
+
+      var reader = new FileReader();
+
+      // Closure to capture the file information.
+      reader.onload = (function(theFile, index) {
+        return function(e) {
+          // Render thumbnail.
+          var img = new Image();
+
+          //用户回调函数
+          img.onload = onloadCallback
+          img.src = e.target.result;
+
+        };
+      })(file);
+
+        // Read in the image file as a data URL.
+      reader.readAsDataURL(file);
+    }
+
+  }
+
+  //默认参数
+  ImageCompress.DEFAULTS = {
+
+  }
+
+
+  //在jQuery对象上提供的静态方法
+  $.extend({
+    
+  });
+
+  //如果有原型方法
+  $.fn.extend({
+    imageCompress: function(options) {
+      var $this = $(this);
+      $this.on('change', function(evt){
+        var model = new ImageCompress(evt, options);
+      });
+    }
+  });
+
+  //noconflict
+  $.fn.imageCompress.noConflict = function () {
+
+  }
+  //代理的事件监听
+  
+}(jQuery);