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
一个一个来

填坑

1、剪贴板圆形

查阅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;
}