cropper基本用法

---

1. 基本使用步骤

1. 在 中导入 cropper.css 样式表：

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

2. 在 的结束标签之前，按顺序导入如下的 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>
   

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

     
     <div class="row1">
       
       <div class="cropper-box">
         
         <img id="image" src="/assets/images/sample.jpg" />
       div>
       
       <div class="preview-box">
         <div>
           
           <div class="img-preview w100">div>
           <p class="size">100 x 100p>
         div>
         <div>
           
           <div class="img-preview w50">div>
           <p class="size">50 x 50p>
         div>
       div>
     div>
   
     
     <div class="row2">
       <button type="button" class="layui-btn">上传button>
       <button type="button" class="layui-btn layui-btn-danger">确定button>
     div>
   

4. 美化的样式：

   /* 设置卡片主体区域的宽度 */
   .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 区域的的样式 */
   .preview-box {
     display: flex;
     flex-direction: column;
     flex: 1;
     align-items: center;
   }
   
   /* 设置 img-preview 区域的样式 */
   .img-preview {
     overflow: hidden;
     border-radius: 50%;
   }
   

5. 实现基本裁剪效果：

     // 1.1 获取裁剪区域的 DOM 元素
     var $image = $('#image')
     // 1.2 配置选项
     const options = {
       // 纵横比
       aspectRatio: 1,
       // 指定预览区域
       preview: '.img-preview'
     }
   
     // 1.3 创建裁剪区域
     $image.cropper(options)
   

2. 更换裁剪的图片

1. 拿到用户选择的文件

   var file = e.target.files[0]
   

2. 根据选择的文件，创建一个对应的 URL 地址：

   var newImgURL = URL.createObjectURL(file)
   

3. 先销毁旧的裁剪区域，再重新设置图片路径，之后再创建新的裁剪区域：

   $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
   

3. 将裁剪后的图片，输出为 base64 格式的字符串

var dataURL = $image
      .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      })
      .toDataURL('image/png')       // 将 Canvas 画布上的内容，转化为 base64 格式的字符串