cropper插件实现头像截取

七牛上传与图片裁剪
在项目开发过程中，我们会遇到用户上传头像，并裁剪头像的操作，那么我们如何将裁剪之后的头像保存到服务器，并显示呢，这里采用cropper插件裁剪图片，使用七牛服务器存储裁剪之后的图片为例：
1.cropper的使用
使用教程：https://github.com/fengyuanchen/cropper#options
简单用例：
（1）定义cropper的属性
var $avatarImg = $('#avatar-img');
            var options = {
                viewMode: 1,
                dragMode: 'move',
                autoCrop: true,
                aspectRatio: 1 / 1,
                cropBoxMovable: false,
                cropBoxResizable: false,
                toggleDragModeOnDblclick: false,
                minCropBoxWidth: 415,
                rotatable: false,
                guides: false,
                crop: function(e) {
                    startX = Math.abs(Math.round(parseFloat($('.cropper-view-box>img').css('margin-left'))));
                    startY = Math.abs(Math.round(parseFloat($('.cropper-view-box>img').css('margin-top'))));
                },
                built: function () {
                    $avatarImg.cropper('setCropBoxData', {"left": 227, "top": 36, "width": 415, "height": 415});
                    zoomImg();
                }
            };
（2）初始化cropper
$avatarImg.cropper(options);
（3）cropper插件更换图片，与放大图片
var replaceImg = function(sourceLink) {
                $avatarImg.one('built.cropper', function () {
                    URL.revokeObjectURL(sourceLink);
                }).cropper('reset').cropper('replace', sourceLink);
            };


            var zoomImg = function() {
                var canvasWidth = parseInt($('.cropper-canvas').css('width')),
                    left = 227;
                if ($(window).width() <= 720) {
                    left = 78;
                }
                while (canvasWidth < 415) {
                    $avatarImg.cropper('zoom', 1);
                    canvasWidth = parseInt($('.cropper-canvas').css('width'));
                }
                $avatarImg.cropper('setCropBoxData', {"left": left, "top": 36, "width": 415, "height": 415});
            };


2.七牛上传
var avatarKey = $avatarImg.data('avatar-key'),
                domain = APP_CONFIG.cdn.domain,
                uploader = Qiniu.uploader({
                runtimes: 'html5,flash,html4',
                browse_button: 'avatar-img-button',
                container: 'upload-container',
                drop_element: 'avatar-img-button',
                max_file_size: '4mb',
                flash_swf_url: 'libs/plupload/Moxie.swf',
                dragdrop: false,
                chunk_size: '4mb',
                uptoken_url: '/service/cdn/uptoken',
                domain: APP_CONFIG.cdn.domain,
                get_new_uptoken: true,
                unique_names: true,
                auto_start: true,
                multi_selection: false,
                filters: {
                    mime_types: [
                        {
                            title : 'Image files',
                            extensions : 'jpg,jpeg,gif,png'
                        }
                    ]
                },
                init: {
                    FileUploaded: function (up, file, info) {


                        domain = up.getOption('domain');


                        var result = $.parseJSON(info),
                            sourceLink = 'http://' + domain + '/' + result.key;


                        avatarKey = result.key;


                        replaceImg(sourceLink);
                    },
                    Error: function (up, err, errTip) {
                        alert(errTip);
                    }
                }
            });


3.保存裁剪后的图片链接到七牛
$('#submit-avatar').on('click', function() {
                if (avatarKey) {
                    var imageData = $avatarImg.cropper('getImageData');
                    avatarHeight = Math.round(imageData.height);
                    avatarWidth = Math.round(imageData.width);
                    var cropWidth = 415,
                        cropHeight = 415,
                        url = domain + '/' + avatarKey + '?imageMogr2/thumbnail/' + avatarWidth + 'x' + avatarHeight + '/crop/!' + cropWidth + 'x' + cropHeight + 'a' + startX + 'a' + startY;