cropper初探

寫在前面：

項目中頭像上傳本身以爲作得很差。是簡單的壓縮上傳，並未作裁剪功能，估摸下一版本應該須要，就提早作好技術儲備。

準備用cropper.js實現

正文

用法

html

<div class="img-container">
    <!-- 被裁減的圖片 -->
    <img id="image" src="images/picture.jpg" alt="Picture">
</div>

 js

//取圖片jq對象
var $image = $('#image');
//設置參數，方法
var options = {
        aspectRatio: 1,
        viewMode: 1,
        preview: '.img-preview',
        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);
        }
      };
//也能夠用on設置方法監聽
$image.on({
    ready: function (e) {
      // 初始化調用
      console.log(e.type);
      croppable = true;
    },
    cropstart: function (e) {
      // 裁剪開始（包括點擊新的區域還未開始拖動）
      console.log(e.type, e.action);
    },
    cropmove: function (e) {
      // 裁剪ing（包括點擊新的區域還未開始拖動）
      console.log(e.type, e.action);
    },
    cropend: function (e) {
      // 裁剪結束（包括點擊新的區域還未開始拖動）
      console.log(e.type, e.action);
    },
    crop: function (e) {
      //改變時調用(點擊裁剪框/裁剪框大小變化/放大縮小/等等)
      // on中優先級與options中的一致
      // 順序僅與調用前後有關
      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);
//cropper 加載參數，構建編輯器

兼容性看起來能夠

Browser support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)
• Edge (latest)
• Internet Explorer 9+

api

api什麼的上git
https://github.com/fengyuanchen/cropperjs
一個一個來

填坑

一、剪貼板圓形

查閱issues

https://github.com/fengyuanchen/cropper/issues/545

經過css修改出現圓形

.cropper-crop-box, .cropper-view-box {
    border-radius: 50%;
}

.cropper-view-box {
    box-shadow: 0 0 0 1px #39f;
    outline: 0;
}