cropper.js 使用

Cropper.js 是一个轻量级的 JavaScript 插件，用于在网页中实现图像裁剪功能，它提供了一个用户友好的界面，允许用户选择和裁剪图像，支持多种配置选项和功能，以下是 Cropper.js 的使用方法：

1、引入库文件：

可以通过 CDN 引入 Cropper.js 的库文件和样式文件。

 <link rel="stylesheet" href="https://unpkg.com/cropperjs/dist/cropper.css">
     <script src="https://unpkg.com/cropperjs/dist/cropper.js"></script>

2、创建 HTML 结构：

在 HTML 文件中创建一个包含图片和剪裁区域的结构，可以使用img 标签来展示图片，并为其设置一个唯一的 ID。

 <div class="container">
         <!-原图 -->
         <div class="imagebox">
             <img id="image" src="/image/zrn4.jpg" width="100" alt="Picture">
         </div>
         <!-一系列操作按钮 -->
         <button id="crop">确认裁剪</button>
         <button id="rotate">rotate</button>
         <button id="reset">reset</button>
         <button id="clear">clear</button>
         <button id="replace">replace</button>
         <button id="destroy">destroy</button>
         <button id="zoomIn">zoomIn</button>
         <button id="zoomOut">zoomOut</button>
         <button id="setAspectRatio">setAspectRatio</button>
         <button id="export">export</button>
         <!-裁剪之后的预览 -->
         <div class="imagebox">
             <img id="preview" src="https://www.luoxiao123.cn/images/2016/10/300x200-1.jpg" alt="Preview">
         </div>
     </div>

3、初始化 Cropper 对象：

在 JavaScript 中初始化 Cropper 对象，并将其绑定到图片上。

 const image = document.getElementById('image');
     const cropper = new Cropper(image, {});

4、配置 Cropper 选项：

在初始化 Cropper 对象时，可以传递一个包含各种配置选项的对象，以满足需求。

 const cropper = new Cropper(image, {
         aspectRatio: 16 / 9, // 剪裁框的宽高比例
         autoCropArea: 0.8, // 自动剪裁区域的大小，相对于原始图片
         viewMode: 1, // 显示模式：0-剪裁框不可移动，1-剪裁框可移动，2-剪裁框自由移动
         movable: true, // 是否允许剪裁框移动
         zoomable: true, // 是否允许缩放图片
         rotatable: true, // 是否允许旋转图片
         guides: true, // 是否显示剪裁框虚线
         background: true, // 是否显示背景网格
         cropBoxMovable: true, // 是否允许剪裁框拖动
         cropBoxResizable: true, // 是否允许剪裁框缩放
         minCropBoxWidth: 100, // 剪裁框的最小宽度
         minCropBoxHeight: 100, // 剪裁框的最小高度
     });

5、响应用户操作：

Cropper.js 提供了各种方法和事件，以便在用户操作时进行响应。

cropper.crop()：进行剪裁，并返回剪裁结果。

cropper.zoomTo(scale)：缩放图片到指定的比例。

cropper.rotate(degree)：将图片旋转指定的角度。

cropper.reset()：重置剪裁操作，还原到初始状态。

cropper.destroy()：销毁 Cropper 实例。

常见的事件包括ready（Cropper 准备就绪）、crop（剪裁完成）和zoom（缩放完成）等，可以监听这些事件并执行相应的操作。

6、获取剪裁结果：

可以使用cropper.getCroppedCanvas() 方法获取剪裁后的 Canvas 对象，然后可以将其转换为 Base64 编码的图像数据或上传到服务器进行保存。

 var result = cropper.getCroppedCanvas({
         width: 800,
         height: 600
     }).toDataURL('image/jpeg'); // 将剪裁结果转换为 Base64 编码的图像数据

FAQs

1、如何更改 Cropper.js 的默认设置？

答：可以在初始化 Cropper 对象时，通过传递一个包含配置选项的对象来更改默认设置，可以设置aspectRatio、viewMode、movable、zoomable 等属性来自定义裁剪框的行为和外观。

2、如何获取剪裁后的图像数据？

答：可以使用cropper.getCroppedCanvas() 方法获取剪裁后的 Canvas 对象，然后使用toDataURL() 方法将其转换为 Base64 编码的图像数据，这样可以轻松地将剪裁后的图像数据上传到服务器或在网页上显示。