(function( factory ) { if ( !window.jQuery ) { alert('jQuery is required.') } jQuery(function() { factory.call( null, jQuery ); }); })(function( $ ) { var Uploader = (function() { // -------setting------- // 如果使用原始大小,超大的图片可能会出现 Croper UI 卡顿,所以这里建议先缩小后再crop. var FRAME_WIDTH = 1600; var _ = WebUploader; var Uploader = _.Uploader; var uploaderContainer = $('.uploader-container'); var uploader, file; if ( !Uploader.support() ) { alert( 'Web Uploader 不支持您的浏览器!'); throw new Error( 'WebUploader does not support the browser you are using.' ); } // hook, // 在文件开始上传前进行裁剪。 Uploader.register({ 'before-send-file': 'cropImage' }, { cropImage: function( file ) { var data = file._cropData, image, deferred; file = this.request( 'get-file', file ); deferred = _.Deferred(); image = new _.Lib.Image(); deferred.always(function() { image.destroy(); image = null; }); image.once( 'error', deferred.reject ); image.once( 'load', function() { image.crop( data.x, data.y, data.width, data.height, data.scale ); }); image.once( 'complete', function() { var blob, size; // 移动端 UC / qq 浏览器的无图模式下 // ctx.getImageData 处理大图的时候会报 Exception // INDEX_SIZE_ERR: DOM Exception 1 try { blob = image.getAsBlob(); size = file.size; file.source = blob; file.size = blob.size; file.trigger( 'resize', blob.size, size ); deferred.resolve(); } catch ( e ) { console.log( e ); // 出错了直接继续,让其上传原始图片 deferred.resolve(); } }); file._info && image.info( file._info ); file._meta && image.meta( file._meta ); image.loadFromBlob( file.source ); return deferred.promise(); } }); return { init: function( selectCb ) { uploader = new Uploader({ pick: { id: '#filePicker', multiple: false }, // 设置用什么方式去生成缩略图。 thumb: { quality: 70, // 不允许放大 allowMagnify: false, // 是否采用裁剪模式。如果采用这样可以避免空白内容。 crop: false }, // 禁掉分块传输,默认是开起的。 chunked: false, // 禁掉上传前压缩功能,因为会手动裁剪。 compress: false, // fileSingleSizeLimit: 2 * 1024 * 1024, server: '../server/fileupload.php', swf: '../Uploader.swf', fileNumLimit: 1, onError: function() { var args = [].slice.call(arguments, 0); alert(args.join('\n')); } }); uploader.on('fileQueued', function( _file ) { file = _file; uploader.makeThumb( file, function( error, src ) { if ( error ) { alert('不能预览'); return; } selectCb( src ); }, FRAME_WIDTH, 1 ); // 注意这里的 height 值是 1,被当成了 100% 使用。 }); }, crop: function( data ) { var scale = Croper.getImageSize().width / file._info.width; data.scale = scale; file._cropData = { x: data.x1, y: data.y1, width: data.width, height: data.height, scale: data.scale }; }, upload: function() { uploader.upload(); } } })(); var Croper = (function() { var container = $('.cropper-wraper'); var $image = container.find('.img-container img'); var btn = $('.upload-btn'); var isBase64Supported, callback; $image.cropper({ aspectRatio: 16 / 9, preview: ".img-preview", done: function(data) { // console.log(data); } }); function srcWrap( src, cb ) { // we need to check this at the first time. if (typeof isBase64Supported === 'undefined') { (function() { var data = new Image(); var support = true; data.onload = data.onerror = function() { if( this.width != 1 || this.height != 1 ) { support = false; } } data.src = src; isBase64Supported = support; })(); } if ( isBase64Supported ) { cb( src ); } else { // otherwise we need server support. // convert base64 to a file. $.ajax('../server/preview.php', { method: 'POST', data: src, dataType:'json' }).done(function( response ) { if (response.result) { cb( response.result ); } else { alert("预览出错"); } }); } } btn.on('click', function() { callback && callback($image.cropper("getData")); return false; }); return { setSource: function( src ) { // 处理 base64 不支持的情况。 // 一般出现在 ie6-ie8 srcWrap( src, function( src ) { $image.cropper("setImgSrc", src); }); container.removeClass('webuploader-element-invisible'); return this; }, getImageSize: function() { var img = $image.get(0); return { width: img.naturalWidth, height: img.naturalHeight } }, setCallback: function( cb ) { callback = cb; return this; }, disable: function() { $image.cropper("disable"); return this; }, enable: function() { $image.cropper("enable"); return this; } } })(); var container = $('.uploader-container'); Uploader.init(function( src ) { Croper.setSource( src ); // 隐藏选择按钮。 container.addClass('webuploader-element-invisible'); // 当用户选择上传的时候,开始上传。 Croper.setCallback(function( data ) { Uploader.crop(data); Uploader.upload(); }); }); });