//html
 <img src="{{ Auth::user()['avater'] }}" id="avater" style="border: none; visibility: visible; margin: 0px; padding: 0px; position: absolute; top: -17px; left: -7px; width: 180px; height: 180px;">
上傳頭像<input type="file" id="up">                     
//js
$("#up").change(function() {
                      var $file = $(this);
                      var fileObj = $file[0];
                      var windowURL = window.URL || window.webkitURL;
                      var dataURL;
                      var $img = $("#avater");
                      if(fileObj && fileObj.files && fileObj.files[0]){
                          dataURL = windowURL.createObjectURL(fileObj.files[0]);
                          $img.attr('src',dataURL);
                          $('#avater').cropper('replace', dataURL, false);
                      }else{
                          dataURL = $file.val();
                          var imgObj = document.getElementById("avater");
                          imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                          imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
                           //重置圖片
                          $('#avater').cropper('replace', dataURL, false);
                      }
                  });
                  $('#avater').cropper({
                      aspectRatio: 1 / 1,
                      viewMode: 2,
                      dragMode: 'none',
                      preview: ".preview-container",
                      responsive: false,
                      restore: false,
                      //        modal:false,
                      //        guides:false,
                      //        background:false,
                      autoCrop: false,
                      //        autoCropArea:0.1,
                      //        movable:false,
                      //        scalable:false,
                      //        zoomable:false,
                      //        wheelZoomRatio:false,
                      //        cropBoxMovable:false,
                      //        cropBoxResizable:false,
                      ready: function () {
                          console.log("ready");
                          console.log(this);
                          $(this).cropper('crop');
                      },
                      cropstart: function (e) {
                          console.log(e);
                          console.log("cropstart");
                      },
                      cropmove: function (e) {
                          console.log("cropmove");
                      },
                      cropend: function (e) {
                          console.log("cropend");
                      },
                      crop: function (e) {
                          console.log("crop");
                      },
                      zoom: function (e) {
                          console.log("zoom");
                      },
                  });