Cropper.js进阶：实现圆形头像裁剪功能

在实现圆形头像裁剪功能之前，首先需要引入 Cropper.js 插件。可以通过 npm 安装或者直接从 CDN 引入。然后，我们可以创建一个 img 标签，将需要裁剪的图片上传到该标签中。

HTML 部分代码：

<div class="container">
  <input type="file" id="image-upload" accept="image/*">
  <img id="image-preview" class="preview-image">
</div>

接下来，我们需要初始化 Cropper.js，并设置相关参数。在本例中，我们将设置裁剪区域为圆形，并设置输出格式为 base64。

JavaScript 部分代码：

document.getElementById('image-upload').addEventListener('change', function (e) {
  var file = e.target.files[0];
  var reader = new FileReader();
  reader.onload = function (event) {
    var imgElement = document.getElementById('image-preview');
    imgElement.src = event.target.result;
    var img = new Cropper(imgElement, {
      aspectRatio: 1, // 设置裁剪区域为圆形
      crop: function (event) {
        console.log(event.detail.x);
        console.log(event.detail.y);
        console.log(event.detail.width);
        console.log(event.detail.height);
        console.log(event.detail.rotate);
        console.log(event.detail.scaleX);
        console.log(event.detail.scaleY);
      },
      built: function () {
        // 获取裁剪后的图片数据
        var canvas = this.getCroppedCanvas();
        var dataURL = canvas.toDataURL('image/png');
        console.log(dataURL);
      }
    });
  };
  reader.readAsDataURL(file);
});

以上代码中，我们首先通过 FileReader 读取上传的图片文件，并将其设置为 img 标签的 src。然后，我们创建一个 Cropper 实例，并设置相关参数。在本例中，我们将 aspectRatio 设置为 1，表示裁剪区域为圆形。在 built 回调函数中，我们可以通过 getCroppedCanvas 方法获取裁剪后的 canvas，并使用 toDataURL 方法将其转换为 base64 格式的图片数据。

最后，我们可以在控制台中查看输出的 base64 格式的图片数据。在实际应用中，可以将该数据用于上传到服务器或者直接在前端显示。

需要注意的是，由于 Cropper.js 的功能非常强大，因此在使用过程中可能会遇到各种问题。建议在使用过程中仔细阅读官方文档，并根据实际情况调整参数和代码逻辑。同时，也可以参考其他开源项目中的使用方式，以便更好地理解和应用 Cropper.js。