Jcrop+七牛JDK+plupload合体成粗糙的头像上传组件。。

plupload中文良心使用手册
七牛图片处理，基本能说清如何使用。
jcrop中文手册，作者翻译的很好。
非常感谢上面三篇文章给予支持。。
代码较乱，有空再整理一下。
基本思路：

1. 初始化jcrop

                    jQuery(function ($) {
                        var jcrop_api = '';
                        var boundx = '';
                        var boundy = '';
                        avatar();
                    });

                    function avatar() {
                        // Grab some information about the preview pane
                        $preview = $('#preview-pane');
                        $pcnt = $('#preview-pane .preview-container');
                        $pimg = $('.jcrop-preview');

                        xsize = $pcnt.width();
                        ysize = $pcnt.height();
//                        console.log('init',[xsize,ysize]);
                        $('#target').Jcrop({
                            boxWidth: 606,
                            boxHeight: 404,
                            allowResize: false,
                            onChange: updatePreview,
                            onSelect: updatePreview,
                            aspectRatio: 1,
                            maxSize: [180, 180],
                            minSize: [180, 180],
                        }, function () {
                            // Use the API to get the real image size
                            $pimg.css({
                                display: 'none',
                                visibility: 'hidden',
                            });
                            var bounds = this.getBounds();
                            boundx = bounds[0];
                            boundy = bounds[1];
                            // Store the API in the jcrop_api variable
                            jcrop_api = this;
                            api = this;
                            // Move the preview into the jcrop container for css positioning
                            $preview.appendTo(jcrop_api.ui.holder);
                        });
                        function updatePreview(c) {
                            $cx = c.x;
                            $cy = c.y;
                            if (parseInt(c.w) > 0) {
                                var rx = xsize / c.w;
                                var ry = ysize / c.h;
                                $pimg.css({
//                                width: Math.round(rx * boundx) + 'px',
//                                height: Math.round(ry * boundy) + 'px',
//                                marginLeft: '-' + Math.round(rx * c.x) + 'px',
//                                marginTop: '-' + Math.round(ry * c.y) + 'px'
//                                width: '180px',
//                                height: '180px',
                                    marginLeft: '-' + c.x + 'px',
                                    marginTop: '-' + c.y + 'px',
                                });
                            }
                        }
                    }

1. 初始化七牛jdk

                    var uptoken = $("input[name=token]").val();
                    //        var company_id=$('.company_id').attr('id');
                    var uploader1 = Qiniu.uploader({
                        runtimes: 'html5,flash,html4',    //上传模式,依次退化
//            browse_button:  $(this).attr("id"),       //上传选择的点选按钮，**必需**
                        browse_button: 'upload1',       //上传选择的点选按钮，**必需**
//            uptoken_url: '/token',
                        //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
                        uptoken: uptoken,
                        //若未指定uptoken_url,则必须指定 uptoken ,uptoken由其他程序生成
                        // unique_names: true,
                        // 默认 false，key为文件名。若开启该选项，SDK会为每个文件自动生成key（文件名）
//             save_key: true,
                        // 默认 false。若在服务端生成uptoken的上传策略中指定了 `sava_key`，则开启，SDK在前端将不对key进行任何处理
                        domain: 'http://img.wenhuacb.cn/',
                        //bucket 域名，下载资源时用到，**必需**
//            container: 'container',           //上传区域DOM ID，默认是browser_button的父元素，
                        max_file_size: '10mb',           //最大文件体积限制
                        flash_swf_url: '/static/plupload/js/Moxie.swf',  //引入flash,相对路径
                        max_retries: 3,                   //上传失败最大重试次数
                        dragdrop: true,                   //开启可拖曳上传
//            drop_element: 'container',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
                        chunk_size: '4mb',                //分块上传时，每片的体积
                        auto_start: false,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
                        init: {
                            'FilesAdded': function (up, files) {

                                plupload.each(files, function (file) {
//                                    console.log(file.getNative());
//                                    console.log(uptoken);
                                    $res = file.getNative();
                                    // 文件添加进队列后,处理相关的事情
                                    var reader = new FileReader();
                                    reader.onload = function (e) {
                                        api.setImage(this.result);
                                        $('.jcrop-preview').attr({
                                            src: this.result,
                                        });
                                        $('.jcrop-preview1').css({
                                            display: 'none',
                                            visibility: 'hidden',
                                        });
                                        $('.jcrop-preview').css({
                                            display: '',
                                            visibility: '',
                                        });
                                    }
                                    //这种写法最容易产生混乱。。
                                    reader.readAsDataURL($res);

                                });
                            },
                            'BeforeUpload': function (up, file) {
                                // 每个文件上传前,处理相关的事情
                            },
                            'UploadProgress': function (up, file) {
                                $('.pro1').html('上传进度' + file.percent);

                                // 每个文件上传时,处理相关的事情

                            },
                            'FileUploaded': function (up, file, info) {
                                // 每个文件上传成功后,处理相关的事情
//                    $('.fname').html(file.name);

//                    $('.keyname1').html(JSON.parse(info).key);
//                    $('.square').attr({
//                        'src':'http://img.wenhuacb.cn/'+JSON.parse(info).key,
//                        'photo':'http://img.wenhuacb.cn/'+JSON.parse(info).key,
//                    });


//                                $('#thumb_pic').attr({
//
//                                    'photo': 'http://img.wenhuacb.cn/' + JSON.parse(info).key,
//                                    'value': 'http://img.wenhuacb.cn/' + JSON.parse(info).key,
//                                });
//                                console.log($pimg.css('margin-left'));
                                $.ajax({
                                    url: '?member/member-face.html',
                                    type: 'POST',
                                    data: {
                                        'uid': $('input[name=uid]').val(),
                                        'data[img]': JSON.parse(info).key + '?imageMogr2/crop/!180x180a' + $cx + 'a' + $cy,
                                    },
                                    succuss: function () {
                                    },
                                });


//                    alert($('.rectangle_logo').val());

                                // 其中 info 是文件上传成功后，服务端返回的json，形式如
                                // {
                                //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                                //    "key": "gogopher.jpg"
                                //  }
                                // 参考http://developer.qiniu.com/docs/v6/api/overview/up/response/simple-response.html
                                // var domain = up.getOption('domain');
                                // var res = parseJSON(info);
                                // var sourceLink = domain + res.key; 获取上传成功后的文件的Url
                            },
                            'Error': function (up, err, errTip) {
                                //上传出错时,处理相关的事情
                            },
                            'UploadComplete': function () {
                                //队列文件处理完毕后,处理相关的事情
                                $('.pro1').html('成功');
                            },
                            'Key': function (up, file) {
                                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                                // 该配置必须要在 unique_names: false , save_key: false 时才生效

//                    var key = company_id+uptoken;
                                // do something with key here
//                    return key
                            }
                        }

1. 使用plupload收集文件
2. 生成DataUrl
3. 图片上传至七牛，将返回的key和收集的截图坐标存入数据库。