pgfqe6ch8/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>


<% if false %>
    <div class="panel-user-right-con clearfix mt70">
      <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-orange 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">
                          <%= image_tag(url_to_avatar(@user), :width => 240, :height => 240, :alt => "头像") %>
                        </div>
                        <span>尺寸：240*240像素</span>
                      </div>
                      <div class="fl ml15">
                        <div class="avatar-preview preview-md" id="imageHead">
                          <%= image_tag(url_to_avatar(@user), :width => 100, :height => 100, :alt => "头像") %>
                        </div>
                        <span>尺寸：100*100像素</span>

                        <div class="avatar-preview preview-sm" id="imageHead">
                          <%= image_tag(url_to_avatar(@user), :width => 40, :height => 40, :alt => "头像") %>
                        </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-grey fa fa-save mt5" data-dismiss="modal"> 保存修改</a>
                    </div>
                    <div class="cl"></div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
<% end %>




<div class="task-popup" style="width: 500px;">
    <div class="task-popup-title clearfix task-popup-bggrey">上传头像</div>
    <div class="clearfix">
      <div class="modal fade" style="outline: none;" 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="padding20">
                  <div class="avatar-upload">
                    <input class="avatar-src" name="avatar_src" type="hidden">
                    <input class="avatar-data" name="avatar_data" type="hidden">

                    <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 mt20">
                    <div class="task-form-45 fl panel-box-sizing uplaodImg">
                      <div class="avatar-wrapper">
                        <!--<span style="display: block;">
                          选择你要上传的图片<br/>
                          仅支持JPG、GIF、PNG，且文件小于2M
                        </span>-->
                      </div>
                      <div class="clearfix">
                        <a href="javascript:void(0);" class="fl" type="button" onClick="$('input[id=avatarInput]').click();">重新上传</a>
                        <a href="javascript:void(0);" class="fa fa-repeat fr mt5 color-grey-9" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees"></a>
                      </div>
                    </div>
                    <div class="task-form-50 panel-box-sizing fr color-grey">
                      <div class="fl edu-txt-center">
                        <div class="avatar-preview preview-lg radius" id="imageHead">
                          <%= image_tag(url_to_avatar(@user), :width => 128, :height => 128, :alt => "头像") %>
                        </div>
                        <span>头像预览</span>
                        <!--<span>尺寸：240*240像素</span>-->
                      </div>
                      <!--<div class="fl ml15">
                        <div class="avatar-preview preview-md" id="imageHead">
                          <%#= image_tag(url_to_avatar(@user), :width => 100, :height => 100, :alt => "头像") %>
                        </div>
                        <span>尺寸：100*100像素</span>

                        <div class="avatar-preview preview-sm" id="imageHead">
                          <%#= image_tag(url_to_avatar(@user), :width => 40, :height => 40, :alt => "头像") %>
                        </div>
                        <span>尺寸：40*40像素</span>
                      </div>-->
                    </div>
                  </div>
                </div>
                <div class="clearfix edu-txt-center mb20 mt10">
                  <a href="javascript:void(0);" class="task-btn mr20" onclick="hidemodal()">取消</a>
                  <a href="javascript:void(0);" class="task-btn task-btn-orange" data-dismiss="modal">确定</a>
                </div>
              </div>
            </form>
          </div>
        </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").removeClass("task-btn-grey").addClass("task-btn-orange");
                $(".avatar-save").on("click", save_avatar);
            }

        });

//        $(".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 save_avatar(){
        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 {
                        notice_box_redirect('<%= avatar_account_path() %>' ,"上传成功");
                    }
                } else {
                    notice_box("上传出错");
                }

            },
            error: function (e) {
                alert(e);
            }
        });
    }
</script>