cropper.js 裁剪图片小插件

发表于 更新于
本文字数： 2.3k 阅读时长 ≈ 2 分钟

cropper.js 官网

https://fengyuanchen.github.io/cropper/

作为搬砖小能手，每次使用插件时都要去百度各种配置项，实在太费劲，给自己总结记录插件的使用方法也是很重要的哦。

引入文件

三个文件都要按下面顺序引入哦，因为我用的 cropper.js 是 jquery 插件嘛，不知道你们用的是不是呢？

1
2
3
4
5
6
<!-- 引入jq -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<!-- 导入cropper的js -->
<script src="https://cdn.bootcdn.net/ajax/libs/cropperjs/2.0.0-alpha.2/cropper.min.js"></script>
<!-- 导入copper中间件 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery-cropper/1.0.1/jquery-cropper.min.js"></script>

初始化 cropper

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="cropper_box">
  <div class="img_box">
    <img id="avatar" src="../assets/images/nature-1.jpg" alt="">
  </div>
  <div class="preview_container">
    <div class="preview_box ">
      <div class="preview w100"></div>
      100 x 100
    </div>
    <div class="preview_box ">
      <div class="preview w50"></div>
      50 x 50
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.img_box{
  float: left;
  width: 500px;
  height: 500px;
  background-color: rgba(0,0,0,.3);
}
.img_box img{
  min-width: 100%;
  min-height: 100%; 
  display: block;
  /* This rule is very important, please don't ignore this */
  max-width: 100%;
}
.preview{
  overflow: hidden;
  border-radius: 50%;
  background-color: gray;
}
1
2
3
4
5
6
7
8
9
10
11
12
// 配置对象
  const options = {
    //纵横比
    aspectRatio: 1/1,
    //指定预览区域(类名):
    preview:'.preview',
    viewMode:2,
    zoomable:false
  }

  // 创建裁剪区域
  $('#avatar').cropper(options)

这里的 html 是我自己写的，重点是要有 img 标签作为裁剪区域，以及 .preview 类的元素作为裁剪预览。

这里的 css 也是我自己写的，重点是 img 要设置 max-width，以及 .preview 要设置 overflow:hidden

好了，这样就能简单使用了！

配置对象 options

下面只列举一些常用属性，要看全部的属性要去看官方文档。

viewMode 定义 cropper 的视图模式，默认：0

0：没有限制，**裁剪框**可以移动到**图片**外。
1 : **裁剪框**只能在**图片**内移动。
2：**图片** 不全部铺满**马赛克框** （即缩小时可以有一边出现空隙）
3：**图片**填充整个**马赛克框**

dragMode 定义cropper的拖拽模式，默认: ‘crop’

'crop': 可以产生一个新的**裁剪框**
'move': 只可以移动**裁剪框**
'none': 什么也不处理

aspectRatio 裁剪框的宽高比，默认：NAN

在默认的时候可以随意改变裁剪框的大小，我这里的设置的值为 1/1。

preview 添加额外的元素(容器)以供预览，默认：‘’

注意这里是一个dom元素，必须可以被Document.querySelectorAll获取到。

center 裁剪框在图片正中心，默认：true

background 显示容器的网格背景，就是后面的马赛克，默认：true

movable 是否允许可以移动后面的图片<默认：true

movable 是否允许可以移动后面的图片，默认：true

scalable 是否允许缩放图像，默认：true

zoomable 是否允许放大图像，默认：true

responsive 在调整窗口大小的时候重新渲染cropper，默认：true

restore 在调整窗口大小后恢复裁剪的区域，默认：true