需求描述：
移動端拍攝照片后却音，彈出圖片裁剪窗口改抡，支持圖片縮放矢炼、移動系瓢、旋轉(zhuǎn)，將裁剪后的圖片以base64的格式傳給后端句灌。

效果圖

一夷陋、引入cropper.js

git地址：https://github.com/fengyuanchen/cropperjs

<link rel="stylesheet" href="../../cropper.min.css">
<script src="../../jquery.min.js"></script>
<script src="../../cropper.min.js"></script>

二、html代碼

<div class="upload-img">
     <input id="selectImg" type="file" accept="image/*" capture="camera" >
</div>

<!-- 裁剪圖片彈窗 -->
  <div class="model cut-img-model" style="display: none;">
    <div class="model-content">
      <div class="cut-img-box">
        <img id="cropperImg">
      </div>
      <p class="instructions">拖動底部照片調(diào)整大小胰锌，將人臉放入人臉框中</p>
      <div class="btnGroup flex-sb">
        <div id="cancel">取消</div>
        <div id="rotate">旋轉(zhuǎn)</div>
        <div id="crop">保存</div>
      </div>
    </div>
  </div>

css代碼

// 限制圖片最大寬度骗绕，避免超出外層容器，必須资昧！
#cropperImg {
  max-width: 100%;
}
// 人形裁剪框可通過以下設(shè)置背景圖實現(xiàn)
.cropper-view-box,
.cropper-face {
  background:url('../../img/cut.png') no-repeat;
  background-size: 100%;
  opacity: 1;
}

js代碼

初始化

1酬土、裁剪框固定且不可放大縮小

var image = document.querySelector('#cropperImg');
var cropper = new Cropper(image, {
      dragMode: 'move',
      aspectRatio: 1,
      autoCropArea: 0.9,
      restore: false,
      guides: false,
      center: false,
      highlight: false,
      cropBoxMovable: false,
      cropBoxResizable: false,
      toggleDragModeOnDblclick: false,
  });

2、圖片鋪滿整個裁剪區(qū)域

圖片鋪滿整個裁剪區(qū)域.png

var image = document.querySelector('#image');
      var cropper = new Cropper(image, {
        viewMode: 3,
        dragMode: 'move',
        autoCropArea: 1, // 可設(shè)置裁剪框的范圍格带，為1則是與整個裁剪區(qū)域一樣大
        restore: false,
        modal: false,
        guides: false,
        highlight: false,
        cropBoxMovable: false,
        cropBoxResizable: false,
        toggleDragModeOnDblclick: false,
      });

選取圖片

$('#selectImg').on('change',function(e){
      var file = e.target.files[0];
      $(".cut-img-model").toggle(); 
      var reader = new FileReader();  
      reader.onload = function(evt) {  
          var replaceSrc = evt.target.result;
          // 更換cropper的圖片
          cropper.replace(replaceSrc, false);
      }
      reader.readAsDataURL(file);
    })

旋轉(zhuǎn)

$('#rotate').on('click', function() {
      cropper.rotate(90);
    })

裁剪

$('#crop').on('click', function() {
      $(".cut-img-model").toggle(); 
      var src = cropper.getCroppedCanvas().toDataURL('image/jpeg', 0.7);
     console.log(src); // base64格式
    })

參考資料：https://www.cnblogs.com/eightFlying/p/cropper-demo.html
https://blog.csdn.net/achejq/article/details/93240104