利用cropper插件进行图片裁剪

最新推荐文章于 2025-05-04 13:01:27 发布 导入 cropper.css 样式表：

`<link rel="stylesheet" href="/assets/lib/cropper/cropper.css" />` 

在的结束标签之前，按顺序导入如下的 js 脚本：

`<script src="/assets/lib/jquery.js"></script>
<script src="/assets/lib/cropper/Cropper.js"></script>
<script src="/assets/lib/cropper/jquery-cropper.js"></script>` 

在卡片的 layui-card-body 主体区域中，定义如下的 HTML 结构：

`<!-- 第一行的图片裁剪和预览区域 -->
<div class="row1">
  <!-- 图片裁剪区域 -->
  <div class="cropper-box">
    <!-- 这个 img 标签很重要，将来会把它初始化为裁剪区域 -->
    <img id="image" src="/assets/images/sample.jpg" />
  </div>
  <!-- 图片的预览区域 -->
  <div class="preview-box">
    <div>
      <!-- 宽高为 100px 的预览区域 -->
      <div class="img-preview w100"></div>
      <p class="size">100 x 100</p>
    </div>
    <div>
      <!-- 宽高为 50px 的预览区域 -->
      <div class="img-preview w50"></div>
      <p class="size">50 x 50</p>
    </div>
  </div>
</div
<!-- 第二行的按钮区域 -->
<div class="row2">
  <button type="button" class="layui-btn">上传</button>
  <button type="button" class="layui-btn layui-btn-danger">确定</button>
</div>` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/icon-arrowwhite.png)

美化的样式：

 `.layui-card-body {
  width: 500px;
}

.row2 {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.cropper-box {
  width: 350px;
  height: 350px;
  background-color: cyan;
  overflow: hidden;
}

.w100 {
  width: 100px;
  height: 100px;
  background-color: gray;
}

.w50 {
  width: 50px;
  height: 50px;
  background-color: gray;
  margin-top: 50px;
}

.size {
  font-size: 12px;
  color: gray;
  text-align: center;
}

.row1 {
  display: flex;
}

.preview-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
}

.img-preview {
  overflow: hidden;
  border-radius: 50%;
}` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/icon-arrowwhite.png)

实现基本裁剪效果

• 获取裁剪区域的 DOM 元素
• 配置选项: 纵横比（aspectRatio）、指定预览区域
• 创建裁剪区域

 `var $image = $('#image')

const options = {

  aspectRatio: 1,

  preview: '.img-preview'
}

$image.cropper(options)` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/icon-arrowwhite.png)

点击弹出文件选择框

`<input type="file" id="file" accept="image/png,image/jpeg" />` 

默认的文件选择框样式比较丑，所以我们定义这个结构，让其隐藏，给文件选择框指定可以上传的文件类型
下面定义一个按钮，文本是 上传，一旦用户点击按钮，我们手动触发 文件选择框的点击事件：

`$('#btnChooseImage').on('click', function() {
  $('#file').click()
})` 

• 给文件选择框绑定 change 事件
• 用户选择了文件就会触发这个事件，通过 e.target.files 获取用户选择文件列表
• 通过索引0拿到用户选择的文件
• 将文件转化为路径
• 利用 $image 重新初始化裁剪区域

 `$('#file').on('change', function(e) {

  var filelist = e.target.files
  if (filelist.length === 0) {
    return layer.msg('请选择照片！')
  }


  var file = e.target.files[0]

  var imgURL = URL.createObjectURL(file)

  $image
    .cropper('destroy') 
    .attr('src', imgURL) 
    .cropper(options) 
})` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/icon-arrowwhite.png)

将裁剪后的头像上传到服务器

• 为确定按钮，绑定点击事件
• 要拿到用户裁剪之后的头像
• 创建一个 Canvas 画布，将 Canvas 画布上的内容，转化为 base64 格式的字符串

`var dataURL = $image
      .cropper('getCroppedCanvas', {

        width: 100,
        height: 100
      })
      .toDataURL('image/png')
      $.ajax({
      method: 'POST',
      url: '/my/update/avatar',
      data: {
        avatar: dataURL
      },
      success: function(res) {
        if (res.status !== 0) {
          return layer.msg('更换头像失败！')
        }
        layer.msg('更换头像成功！')
        window.parent.getUserInfo()
      }
    })` 

![](https://csdnimg.cn/release/blogv2/dist/pc/img/runCode/icon-arrowwhite.png)

什么是base64格式的图片

base64格式一段字符串，其实base64格式的图片，就是利用一段字符串来描述这张图片

好处：能够避免一些额外的图片请求

缺点：体积会比原来图片要大 30% 左右

使用场景：不适用大图片，一些小图片比较适合使用