educoder/app/views/account/avatar.html.erb

<script src="../head/jquery.min.js"></script>
<link href="../head/cropper.min.css" rel="stylesheet">
<link href="../head/sitelogo.css" rel="stylesheet">
<script src="../head/bootstrap.min.js"></script>
<script src="../head/cropper.js"></script>
<script src="../head/sitelogo.js"></script>
<script src="../head/html2canvas.min.js" type="text/javascript" charset="utf-8"></script>

<div class="panel-user-right-con clearfix ">
  <div class="modal fade mt50" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <form class="avatar-form">
          <div class="modal-body">
            <div class="avatar-body">
              <div class="avatar-upload">
                <input class="avatar-src" name="avatar_src" type="hidden">
                <input class="avatar-data" name="avatar_data" type="hidden">
                <a href="javascript:void(0);" class="task-btn task-btn-blue ml5" type="button" onClick="$('input[id=avatarInput]').click();">本地上传</a>
                <span id="avatar-name"></span>
                <input class="avatar-input" style="display:none;" id="avatarInput" name="avatar_file" type="file">
                <input type="hidden" id="source_id" value="<%= @user.id %>"/>
                <input type="hidden" id="source_type" value="User"/>
              </div>
              <div class="row clearfix">
                <div class="task-form-45 fl panel-box-sizing">
                  <div class="avatar-wrapper" style="text-align: center;">
                    <span style="display: block; margin-top:150px;">选择你要上传的图片<br/>
仅支持JPG、GIF、PNG，且文件小于2M</span>
                  </div>
                </div>
                <div class="task-form-50 panel-box-sizing fr color-grey" style=" text-align: center; padding-top:30px;">
                  <span>预览（请注意是否清晰）<br/></span>

                  <div class="fl ">
                    <div class="avatar-preview preview-lg" id="imageHead">
                    </div>
                    <span>尺寸：240*240像素</span>
                  </div>
                  <div class="fl ml15">
                    <div class="avatar-preview preview-md" id="imageHead"></div>
                    <span>尺寸：100*100像素</span>

                    <div class="avatar-preview preview-sm" id="imageHead"></div>
                    <span>尺寸：40*40像素</span>
                  </div>
                </div>
              </div>
              <div class="row avatar-btns">
                <div class="task-form-50 fl">
                  <div class="btn-group">
                    <a href="javascript:void(0);" class="task-btn fa fa-undo fl" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">
                      向左旋转</a>
                  </div>
                  <div class="btn-group">
                    <a href="javascript:void(0);" class="task-btn fa fa-repeat fl ml10" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">
                      向右旋转</a>
                  </div>
                  <div class="cl"></div>
                </div>
                <div class=" fr">
                  <a href="javascript:void(0);" class="avatar-save task-btn task-btn-blue fa fa-save mt5" data-dismiss="modal"> 保存修改</a>
                </div>
                <div class="cl"></div>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
    $(function () {
         new CropAvatar($('#crop-avatar'), 1/1);

        //---------------------------头像上传-----------------------------//
        //做个下简易的验证  大小 格式
        $('#avatarInput').on('change', function(e) {
            var filemaxsize = 1024 * 5;//5M
            var target = $(e.target);
            var Size = target[0].files[0].size / 1024;
            if(Size > filemaxsize) {
                alert('图片过大，请重新选择!');
                $(".avatar-wrapper").children().remove;
                return false;
            }
            if(!this.files[0].type.match(/image.*/)) {
                alert('请选择正确的图片!')
            } else {
                var filename = document.querySelector("#avatar-name");
                var texts = document.querySelector("#avatarInput").value;
                var teststr = texts; //你这里的路径写错了
                testend = teststr.match(/[^\\]+\.[^\(]+/i); //直接完整文件名的
                filename.innerHTML = testend;
                $(filename).css("color", '#333');
            }

        });

        $(".avatar-save").on("click", function() {
            var img_lg = document.getElementById('imageHead');
            if($(img_lg).html().trim() == ""){
                $("#avatar-name").html("请先选择图片上传").css("color", 'red');
            } else {
                $("#avatar-name").html("").css("color", '#333');
                // 截图小的显示框内的内容
                html2canvas(img_lg, {
                    allowTaint: true,
                    taintTest: false,
                    onrendered: function(canvas) {
                        canvas.id = "mycanvas";
                        //生成base64图片数据
                        var dataUrl = canvas.toDataURL("image/jpeg");
                        var newImg = document.createElement("img");
                        newImg.src = dataUrl;
                        imagesAjax(dataUrl);
                        $(".avatar-save").attr("disabled","true");
                    }
                });
            }
        });


        function imagesAjax(src) {
            var data = {};
            data.img = src;
            data.source_id = $('#source_id').val();
            data.source_type = $('#source_type').val();
            data.is_direct = 0;
            $.ajax({
                url: "<%= upload_avatar_path() %>",
                beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
                data: data,
                type: "POST",
                success: function (re) {
                    console.log(re);
                    if(re){
                        var o = JSON.parse(re);
                        if (o.status !=0 ){
                            console.log(o.message);
                        } else {
                            long_notice_box("上传成功");
                            window.location.reload();
                        }
                    } else {
                        long_notice_box("上传出错");
                    }

                },
                error: function (e) {
                    alert(e);
                }
            });
        }
    })

</script>