图片裁剪

图片裁剪使用了单独的JS插件 cropper 实现，需要先引入插件的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="lib/cropper/cropper.min.css"/>

<script type="text/javascript" src="lib/cropper/cropper.min.js"></script>

示例代码

<style>
  .lists{width: 100%; background: #FFF; border-radius: 5px; padding: 0 15px; box-sizing: border-box;}
  .list{width: 100%; font-size: 0; padding: 5px 0;}
  .list input{width: auto; min-width: 100px; height: 50px; line-height: 50px; padding: 0; font-size: 14px; color: #646464; border: none; text-align: right; margin: 0;  float: right;}
  .img-items{width: 100%; font-size: 0;}
  .img-item{width: -webkit-calc((100% - 30px) / 3); width: calc((100% - 30px) / 3); height: -webkit-calc((100vw - 30px - 30px - 30px) / 3); display: inline-block; vertical-align: top; margin: 0 0 15px 0; border-radius: 5px; position: relative;}
  .img-item:nth-child(3n-1){margin: 0 15px 15px 15px;}
  .add-item{line-height: -webkit-calc((100vw - 30px - 30px - 30px) / 3); line-height: calc((100vw - 30px - 30px - 30px) / 3); text-align: center;}
  .add-item i{font-size: 30px; color: #aaa;}
  .add-item:after{border-radius: 5px;}
  .img-item .img{height: 100%; height: 100%; background: #F4F4F4; overflow: hidden; border-radius: 5px; position: relative;}
  .img-item .img img{width: 100%; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
  .img-item .delete-btn{width: 25px; height: 25px; text-align: center; border: 2px solid #FFF; border-radius: 50%; background: var(--aui-blue); position: absolute; top: -10px; right: -10px;}
  .img-item .delete-btn i{font-size: 15px; color: #FFF; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
  .submit-btn{width: 100%; background: var(--aui-blue); margin: 30px 0; color: #FFF; font-size: 15px;}
</style>
<div class="content" style="padding: 15px 15px 0px;">
  <ul class="lists">
    <li class="list">
      <label for="">上传照片<i class="red">*</i>
        <span class="tip">(最多3张单张照片不大于10MB)</span>
      </label>
      <dl class="img-items">
        <dd class="img-item add-item border">
          <input type="file" hidden="hidden" onchange="addImg" name="" id="addimg" value="" accept="image/*">
          <i class="iconfont iconadd2"></i>
        </dd>
      </dl>
    </li>
  </ul>
  <div class="submit-btn aui-btn">提交</div>
<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container">
  <div class="black-cloth" onclick="closeTailor()">
  </div>
  <div class="tailoring-content">
    <div class="tailoring-content-two">
      <div class="tailoring-box-parcel">
        <img id="tailoringImg">
      </div>
      <div class="preview-box-parcel">
        <p>
          图片预览：
        </p>
        <div class="square previewImg">
        </div>
        <div class="circular previewImg">
        </div>
      </div>
    </div>
    <div class="tailoring-content-three row-before">
      <button class="l-btn cropper-reset-btn" onclick="resetTailor()">
        复位
      </button>
      <button class="l-btn cropper-rotate-btn" onclick="rotateTailor()">
        旋转
      </button>
      <button class="l-btn cropper-scaleX-btn" onclick="reversalTailor()">
        换向
      </button>
      <button class="l-btn cropper-scaleX-btn gray" onclick="closeTailor()">
        取消
      </button>
      <button class="l-btn sureCut" id="sureCut" onclick="confirmTailor()">
        确定
      </button>
    </div>
  </div>
</div>
<!--图片裁剪框 end-->
</div>
<script>
  var images = []; // 已选图片
  function addImg(){
      var file = document.querySelector('#addimg').files[0];
      if(images.length >= 3){aui.toast({msg: '最多可上传3张'}); return;}
      if(file.size >= 1024 * 1024 * 10){aui.toast({msg: '照片大于10MB,请重新上传'}); return;}

      var reader = new FileReader();
      reader.onloadend = function () {
          images.push(reader.result); //添加
      }
      if (file) {
          reader.readAsDataURL(file);
      }

      //创建FormData对象
      var data = new FormData();
      //为FormData对象添加数据
      data.append('file', file);
      data.append('path', "uploads/images/feedback");
      data.append('thumb', "0");
      $.ajax({
          url: 'uoloadurl',
          type: 'post',
          contentType: false,
          processData: false,
          data: file,
          success: function(ret){
              if(ret.status == 0){
                  // 显示裁剪
                  $(".tailoring-container").show();
              }
          },
      });
  }
  // 取消裁剪
  function closeTailor() {
    $(".tailoring-container").hide();
  }
  //复位裁剪框
  function resetTailor() {
    $('#tailoringImg').cropper("reset");
  }
  var flagX = true;  // 标记图片当前方向
  //换向裁剪框
  function reversalTailor() {
    if (flagX) {
      $('#tailoringImg').cropper("scaleX", -1);
    } else {
      $('#tailoringImg').cropper("scaleX", 1);
      flagX = true;
    }
    flagX != flagX;
  }

  //旋转裁剪框
  function rotateTailor() {
    $('#tailoringImg').cropper("rotate", 45);
  }

  //裁剪完成确定操作
  function confirmTailor() {
    if ($("#tailoringImg").attr("src") == null) {
      return false;
    } else {
      var cas = $('#tailoringImg').cropper('getCroppedCanvas'); //获取被裁剪后的canvas
      var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
      $("#finalImg").prop("src", base64url); //显示为图片的形式
      images.push(base64url); //添加
      //关闭裁剪框
      closeTailor();
    }
  }
</script>