cropper，图片剪辑上传工具的使用

cropper工具是一个功能强，兼容性好的一个图片裁剪和上传工具

GitHub地址：https://github.com/kesixin/Head_Cut_PC

<div class="container" style="margin-top:20px; display: none" id="prop">
        <div class="row">
            <div class="col-md-9">
                <div class="img-container">
                    <img id="image">
                </div>
            </div>
            <div class="col-md-3">
                <div class="docs-preview clearfix">
                    <!-- <span> 预览效果</span> -->
                    <div class="img-preview preview-lg" id="img-preview"></div>
                    <div class="img-preview preview-lg" id="img-preview_sm" style="border-radius: 200px;"></div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9 docs-buttons">
                <div class="btn-group">
                    <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击放大">
                          放大
                        </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
                        <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击缩小">
                          缩小
                        </span>
                    </button>
                </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击向左移">
                      左移
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击向右移">
                      右移
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击向上移">
                      上移
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击下右移">
                      下移
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate Left">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击向左转90º">
                      左转90º
                    </span>
                </button>
                <button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate Right">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击向右转90º">
                      右转90º
                    </span>
                </button>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="点击还原">
                      刷新
                    </span>
                </button>
                <input type="file" class="sr-only" id="inputImage" name="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
                <button type="button" class="btn btn-primary" data-method="reset" title="Reset">
                    <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="选择图片">
                      选择图片
                    </span>
                </button>
            </div>
            <div class="btn-group btn-group-crop">
                <button class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ 'width': 180, 'height': 90 }" type="button">
                    上传头像
                </button>
            </div>
            <div class="modal fade docs-cropped" id="getCroppedCanvasModal" style="display: none;" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="getCroppedCanvasTitle">修剪</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body"></div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.jpg">下载</a>
                        </div>
                    </div>
                </div>
            </div>
          </div>
    </div>

这是一个完整的案例，只需要不提交和显示的东西调整一下就行啦

$(function () {

  'use strict';//表示强规则

  var console = window.console || { log: function () {} };
  var URL = window.URL || window.webkitURL;
  var $image = $('#image');
  var $download = $('#download');
  //获取图片截取的位置
  var $dataX = $('#dataX');
  var $dataY = $('#dataY');
  var $dataHeight = $('#dataHeight');
  var $dataWidth = $('#dataWidth');
  var $dataRotate = $('#dataRotate');
  var $dataScaleX = $('#dataScaleX');
  var $dataScaleY = $('#dataScaleY');
  var options = {
        movable: false,
        center: true,
        aspectRatio: 1 / 1, //裁剪框比例1:1
        preview: [document.getElementById('img-preview'),document.getElementById('img-preview_sm')],//这一块是对选区后的展示框进行须按则，这里是在两个快元素中，
        crop: function (e) {
          $dataX.val(Math.round(e.x));
          $dataY.val(Math.round(e.y));
          $dataHeight.val(Math.round(e.height));
          $dataWidth.val(Math.round(e.width));
          $dataRotate.val(e.rotate);
          $dataScaleX.val(e.scaleX);
          $dataScaleY.val(e.scaleY);
        }
      };
  var originalImageURL = $image.attr('src');
  var uploadedImageURL;

  // Cropper
  $image.on({
    ready: function (e) {
      // console.log(e.type);
    },
    cropstart: function (e) {
      // console.log(e.type, e.action);
    },
    cropmove: function (e) {
      // console.log(e.type, e.action);
    },
    cropend: function (e) {
      // console.log(e.type, e.action);
    },
    crop: function (e) {
      // console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
    },
    zoom: function (e) {
      // console.log(e.type, e.ratio);
    }
  }).cropper(options);

  // Buttons
  if (!$.isFunction(document.createElement('canvas').getContext)) {
    $('button[data-method="getCroppedCanvas"]').prop('disabled', true);
  }

  if (typeof document.createElement('cropper').style.transition === 'undefined') {
    $('button[data-method="rotate"]').prop('disabled', true);
    $('button[data-method="scale"]').prop('disabled', true);
  }

  // Download
  if (typeof $download[0].download === 'undefined') {
    $download.addClass('disabled');
  }

  // Options
  $('.docs-toggles').on('change', 'input', function () {
    var $this = $(this);
    var name = $this.attr('name');
    var type = $this.prop('type');
    var cropBoxData;
    var canvasData;

    if (!$image.data('cropper')) {
      return;
    }

    if (type === 'checkbox') {
      options[name] = $this.prop('checked');
      cropBoxData = $image.cropper('getCropBoxData');
      canvasData = $image.cropper('getCanvasData');

      options.ready = function () {
        $image.cropper('setCropBoxData', cropBoxData);
        $image.cropper('setCanvasData', canvasData);
      };
    } else if (type === 'radio') {
      options[name] = $this.val();
    }

    $image.cropper('destroy').cropper(options);
  });

  // Methods
  $('.docs-buttons').on('click', '[data-method]', function () {
    var $this = $(this);
    var data = $this.data();
    var $target;
    var result;

    if ($this.prop('disabled') || $this.hasClass('disabled')) {
      return;
    }

    if ($image.data('cropper') && data.method) {
      data = $.extend({}, data); // Clone a new one

      if (typeof data.target !== 'undefined') {
        $target = $(data.target);

        if (typeof data.option === 'undefined') {
          try {
            data.option = JSON.parse($target.val());
          } catch (e) {
            // console.log(e.message);
          }
        }
      }

      if (data.method === 'rotate') {
        $image.cropper('clear');
      }

      result = $image.cropper(data.method, data.option, data.secondOption);

      if (data.method === 'rotate') {
        $image.cropper('crop');
      }

      switch (data.method) {
        case 'scaleX':
        case 'scaleY':
          $(this).data('option', -data.option);
          break;

        case 'getCroppedCanvas'://上传头像
          if (result) {
            var imgBase=result.toDataURL('image/jpeg');
            var data={img:imgBase};//这一块是上传数据，对裁切好的图片以base64的格式进行进行上传，其他 的保持不懂就行
            JgAjax({
              url:"sub_act.php",
              type:"POST",
              dataType:"json",
              data:"act=upload_avatar&type=1&img="+imgBase,
              success:function(e)
              {
                layer.msg(e.des,{time:1500});
                if (e.state == "success")
                {
                  $image.cropper('destroy').attr('src', originalImageURL).cropper(options);
                  getAjax();
                  layer.closeAll("page");
                }
              }
            })
          }

          break;

        case 'destroy':
          if (uploadedImageURL) {
            URL.revokeObjectURL(uploadedImageURL);
            uploadedImageURL = '';
            $image.attr('src', originalImageURL);
          }

          break;
      }

      if ($.isPlainObject(result) && $target) {
        try {
          $target.val(JSON.stringify(result));
        } catch (e) {
          // console.log(e.message);
        }
      }

    }
  });

  // Keyboard
  $(document.body).on('keydown', function (e) {

    if (!$image.data('cropper') || this.scrollTop > 300) {
      return;
    }

    switch (e.which) {
      case 37:
        e.preventDefault();
        $image.cropper('move', -1, 0);
        break;

      case 38:
        e.preventDefault();
        $image.cropper('move', 0, -1);
        break;

      case 39:
        e.preventDefault();
        $image.cropper('move', 1, 0);
        break;

      case 40:
        e.preventDefault();
        $image.cropper('move', 0, 1);
        break;
    }

  });

  // Import image
  var $inputImage = $('#inputImage');

  if (URL) {
    $inputImage.change(function () {
      var files = this.files;
      var file;

      if (!$image.data('cropper')) {
        return;
      }

      if (files && files.length) {
        file = files[0];

        if (/^image\/\w+$/.test(file.type)) {
          if (uploadedImageURL) {
            URL.revokeObjectURL(uploadedImageURL);
          }

          uploadedImageURL = URL.createObjectURL(file);
          $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
          $inputImage.val('');
        } else {
          window.alert('Please choose an image file.');
        }
      }
    });
  } else {
    $inputImage.prop('disabled', true).parent().addClass('disabled');
  }

});