如何通过CropperJS实现图片裁剪功能？看这个案例解析！

Cropper.js案例：移动端图片选择与裁剪功能

背景介绍

在当今的前端开发中，图片上传和裁剪功能已经成为许多应用的标配，无论是用户头像上传、商品图片添加，还是社交媒体的照片分享，都需要对图片进行处理，Cropper.js 是一个轻量级的 JavaScript 插件，用于在网页中实现图片裁剪功能，本文将详细介绍如何使用 Cropper.js 实现移动端图片选择和裁剪功能。

操作步骤

1、安装 Cropper.js

如果使用 npm 安装：

 npm install cropper
     npm install jquery  # Cropper.js 依赖于 jQuery

或者通过 CDN 引入：

 <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
     <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

2、HTML 结构

创建一个基本的 HTML 结构，包括图片上传按钮和裁剪区域：

 <div class="upload-box">
     <!-回显上传图片 -->
     <div class="upload-img-box">
       <img id="targetImage" src="img/2.png" alt="">
     </div>
     <div class="upload-btn">
       <button type="button" class="btn-box">相机(图片)</button>
       <input id="select-box" type="file" style="display: none;" />
     </div>
   </div>
   <!-裁剪图片弹窗 -->
   <div class="module-cropper" style="display: none;">
     <div class="module-cropper-content">
       <div class="module-cropper-bg">
         <!-包装图像或画布元素 -->
         <div class="cropper-img-box">
           <img id="cropperImg" src="img/1.jpg" />
         </div>
       </div>
       <div class="module-cropper-btn">
         <span onclick="cancelCropper()">取消</span>
         <span onclick="rotateCropper()">旋转</span>
         <span onclick="cropperSucess()">完成</span>
       </div>
     </div>
   </div>

3、CSS 样式

为页面元素添加样式，确保布局美观：

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   .upload-box {
     width: 100%;
     overflow: hidden;
     position: absolute;
     top: 40%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   .upload-img-box {
     width: 80%;
     margin: 20px auto;
     padding: 20px;
     box-sizing: border-box;
     border: 1px solid #ddd;
     border-radius: 5px;
   }
   .upload-img-box img {
     width: 100%;
   }
   .upload-btn {
     width: 80%;
     margin: 0 auto;
     overflow: hidden;
     text-align: center;
   }
   .btn-box {
     width: 120px;
     background: #2DCEC2;
     line-height: 35px;
     text-align: center;
     color: #fff;
     border-radius: 5px;
     border: none;
     outline-style: none;
   }
   .module-cropper {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     background: rgba(0, 0, 0, .8);
   }
   #cropperImg {
     max-width: 100%;
   }
   .module-cropper-content {
     width: 90%;
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   .module-cropper-bg {
     width: 100%;
     height: 80vh;
     overflow: hidden;
     position: relative;
   }
   .cropper-img-box {
     position: relative;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
   }
   .module-cropper-btn {
     width: 100%;
     overflow: hidden;
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-top: 5vh;
   }
   .module-cropper-btn span {
     color: #fff;
     font-size: 13px;
   }

4、JavaScript 初始化

初始化 Cropper.js 实例，并实现相关功能：

 document.addEventListener('DOMContentLoaded', function () {
     const image = document.getElementById('targetImage'); // 包装图像或画布元素
     let options = {
       aspectRatio: 16 / 9, // 裁剪框的宽高比,默认NA
       crop: function (e) {
         console.log(e.detail.x);
         console.log(e.detail.y);
         console.log(e.detail.width);
         console.log(e.detail.height);
         console.log(e.detail.rotate);
         console.log(e.detail.scale);
       }
     };
     new Cropper(image, options);
   });

FAQs（常见问题解答）

Q1: Cropper.js 支持哪些格式的图片？

A1: Cropper.js 支持多种图片格式，包括常见的 JPEG、PNG 等，你可以通过文件输入控件选择不同格式的图片进行裁剪，Cropper.js 还支持实时预览和导出功能，方便开发者处理不同格式的图片。

Q2: 如何保存裁剪后的图片？

A2: 你可以使用getCroppedCanvas 方法获取裁剪后的 canvas 对象，然后将其转换为 Base64 编码或 Blob，并上传到服务器，以下是一个示例代码：

document.getElementById('save-crop').addEventListener('click', function () {
  image.cropper.getCroppedCanvas().toDataURL('image/jpeg')
    .then(function (dataUrl) {
      var img = document.createElement('img');
      img.src = dataUrl;
      document.body.appendChild(img);
      // 或者将数据发送到服务器
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '/upload/image', true);
      xhr.setRequestHeader('Content-Type', 'application/octet-stream');
      xhr.send(new Blob([dataUrl.replace(/^data:image/(png|jpeg|jpg);base64,/, '')], {type: 'application/octet-stream'}));
    });
});

这段代码演示了如何获取裁剪后的图像并将其显示在页面上或上传到服务器，你可以根据实际需求进行调整。