cropper 中文api

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

1、基础使用

引入 Cropper.js：

通过 CDN 引入：

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

通过 npm 安装：

       npm install cropperjs

初始化 Cropper.js：

选择要裁剪的图片元素，并实例化 Cropper 对象：

       const image = document.getElementById('image');
       const cropper = new Cropper(image, {
         aspectRatio: 16 / 9,
         dragMode: 'move',
         preview: '.before',
         background: false,
         autoCropArea: 0.8,
         zoomOnWheel: false
       });

2、常用方法

生成裁剪后的画布：

getCroppedCanvas(options)：返回一个包含裁剪后图像的 canvas 对象，可以通过toDataURL 方法将其转换为 Base64 格式的字符串。

       const croppedCanvas = cropper.getCroppedCanvas();
       const croppedImage = croppedCanvas.toDataURL('image/jpeg');

获取裁剪框数据：

getCropBoxData()[{}]：获取当前裁剪框的位置和尺寸信息。

       const cropBoxData = cropper.getCropBoxData();
       console.log(cropBoxData);

设置裁剪框数据：

setCropBoxData(data)[null]：设置裁剪框的位置和尺寸。

       cropper.setCropBoxData({
         left: 50,
         top: 50,
         width: 200,
         height: 200
       });

获取图片数据：

getCanvasData()[{}]：获取当前 canvas 的位置和尺寸信息。

       const canvasData = cropper.getCanvasData();
       console.log(canvasData);

设置图片数据：

setCanvasData(data)[null]：设置 canvas 的位置和尺寸。

       cropper.setCanvasData({
         left: 10,
         top: 10,
         width: 300,
         height: 300
       });

销毁 Cropper.js 实例：

destroy()[null]：销毁当前的 Cropper.js 实例，释放相关资源。

       cropper.destroy();

3、事件回调

Cropper.js 提供了丰富的事件回调函数，方便开发者进行自定义扩展。

cropstart：裁剪开始时触发。

cropmove：裁剪移动时触发。

cropend：裁剪结束时触发。

crop：裁剪完成时触发。

zoom：缩放时触发。

示例：

     cropper.on('cropstart', function (event) {
       console.log('裁剪开始');
     });
     cropper.on('cropmove', function (event) {
       console.log('裁剪移动');
     });
     cropper.on('cropend', function (event) {
       console.log('裁剪结束');
     });
     cropper.on('crop', function (event) {
       console.log('裁剪完成');
     });
     cropper.on('zoom', function (event) {
       console.log('缩放');
     });

4、参数配置

Cropper.js 提供了丰富的参数配置选项，可以根据需求进行灵活配置。

viewMode：定义裁切器的查看模式，可选值有 0（无限制）、1（限制裁切框不要超过图片的大小）、2（限制裁切框不能超出图片的范围，且图片填充模式为 cover 最长边填充满容器）、3（限制裁切框不能超出图片的范围，且图片填充模式为 contain 最短边填充），默认值为 0。

dragMode：定义裁切器的拖动模式，可选值有 ‘crop’（创建一个新的裁切框，图片不能移动）、’move’（不从新创建裁切框，可以拖动图片位置）、’none’（不从新创建裁切框，也不能拖动图片），默认值为 ‘crop’。

initialAspectRatio：定义裁切框的初始宽高比，默认情况下，它与画布（图像包装器）的纵横比相同，这个值只有在aspectRatio 值不进行设置的时候生效，类型为 Number。

示例：

     const cropper = new Cropper(image, {
       viewMode: 1,
       dragMode: 'move',
       initialAspectRatio: 1,
       aspectRatio: 16 / 9,
       preview: '.before',
       background: false,
       autoCropArea: 0.8,
       zoomOnWheel: false
     });

以下是两个常见问题及解答：

1、如何更新裁剪框的数据？

答：可以使用setCropBoxData 方法来更新裁剪框的数据，要将裁剪框的位置设置为左上角坐标为 (50, 50)，宽度和高度分别为 200px：

   cropper.setCropBoxData({
     left: 50,
     top: 50,
     width: 200,
     height: 200
   });

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

答：可以使用getCroppedCanvas 方法获取裁剪后的 canvas 对象，然后使用toDataURL 方法将其转换为 Base64 格式的字符串。

   const croppedCanvas = cropper.getCroppedCanvas();
   const croppedImage = croppedCanvas.toDataURL('image/jpeg');

小编有话说：Cropper.js 是一个非常强大且易于使用的图像裁剪工具，它提供了丰富的 API 和配置选项，可以帮助开发者快速实现各种复杂的图像裁剪功能，无论是在网页设计、图像编辑还是其他领域，Cropper.js 都是一个值得推荐的库，希望本文能够帮助你更好地理解和使用 Cropper.js，如果你在使用过程中遇到任何问题，欢迎随时提问。