+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);