Cropper.js实现圆形头像裁剪功能教程

作者：键盘侠时间：2026-10-26 14:10:44浏览：80

本文详解如何使用Cropper.js库实现圆形头像裁剪功能。通过引入库文件、构建HTML结构、设置CSS样式及编写JavaScript逻辑，展示如何配置aspectRatio为1并获取裁剪后的图像数据，最终在页面中展示圆形头像效果。

引言

Web应用中，用户上传图片并裁剪生成个人头像属常见需求。本文阐述利用知名图片裁剪库Cropper.js实现简易圆形头像裁剪功能的方法。通过解析HTML、CSS及JavaScript代码，协助读者迅速掌握该技能。

准备工作

首先，确保项目中引入Cropper.js库及其相关CSS文件。可使用CDN服务加载：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow"  rel="external nofollow" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>

页面结构

接下来，需构建HTML结构。需要一个<img>元素显示待裁剪图片，并设按钮触发裁剪操作。最后，需另一个<img>元素展示裁剪结果：

<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <div>
    <img id="cropped-result">
  </div>
</body>

添加样式

需设置样式以调整图片显示及裁剪框形状。本例中，希望裁剪框呈圆形。可通过CSS实现：

<style>
  img {
    width: 800px; 
    height: 500px;
  }
  .cropper-view-box, .cropper-face {
    border-radius: 50%;
  }
  #cropped-result {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
  }
</style>

编写JavaScript

接下来，需编写JavaScript代码以初始化Cropper.js库并处理裁剪操作。首先，获取待裁剪图片元素，并为其设置Cropper实例。设置时，可将aspectRatio参数设为1，以确保裁剪框为正方形：

var image = document.getElementById('image');
var cropper = new Cropper(image, {
  aspectRatio: 1,
});

随后，需编写函数处理裁剪操作。该函数在用户点击“裁剪”按钮时调用。在此函数中，需获取裁剪后的图像数据，并将其显示在另一个<img>元素中。可使用getCroppedCanvas()方法获取裁剪后的图像数据，再使用toDataURL()方法将其转换为DataURL格式：

function split() {
  // 获取裁剪结果（返回裁剪后的图像数据）
  var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
  // 将裁剪结果显示在另一个元素中
  var resultElement = document.getElementById('cropped-result');
  resultElement.src = croppedData;
}

至此，已实现简易圆形头像裁剪功能。用户可在页面选择并裁剪图片，随后查看裁剪结果。

总结

本文介绍了如何使用Cropper.js库实现简易圆形头像裁剪功能。首先创建页面结构并添加样式。随后编写JavaScript代码初始化Cropper.js库并处理裁剪操作。最后，展示了如何将裁剪后的图像数据显示在另一个<img>元素中。

全部代码如下

<!DOCTYPE html>
<html>
<head>
  <title>图片裁剪工具</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.css" rel="external nofollow"  rel="external nofollow" >
  <style>
    img {
      width: 800px; 
      height: 500px;
    }
    .cropper-view-box, .cropper-face {
      border-radius: 50%;
    }
    #cropped-result {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div>
    <img src="https://p1.ssl.qhimg.com/t019228fc2ed5df1aa8.jpg" id="image">
  </div>
  <button onclick="split()"> 裁剪 </button>
  <div>
    <img id="cropped-result">
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>
  <script>
    var image = document.getElementById('image');
    var cropper = new Cropper(image, {
      aspectRatio: 1,
    });
    function split() {
      console.log(1);
      // 获取裁剪结果（返回裁剪后的图像数据）
      var croppedData = cropper.getCroppedCanvas().toDataURL('image/jpeg');
      // 将裁剪结果显示在另一个元素中
      var resultElement = document.getElementById('cropped-result');
      resultElement.src = croppedData;
    }
  </script>
</body>
</html>

以上为Cropper.js进阶之实现圆形头像裁剪功能示例的详细内容，更多关于Cropper.js圆形头像裁剪的资料请关注本站其它相关文章！

作者最新文章

免登录快速分享代码：适合面试协作的轻量级JS在线运行工具推荐

2026-11-05 14:45:59

JS空字符串和纯空格转浮点数的结果是什么

2026-11-05 11:04:42

JS在线格式化缩进混乱怎么办？配置项调整技巧

2026-11-04 23:27:25

JS怎么获取秒级时间戳

2026-11-03 21:45:29

JS时间戳怎么从毫秒转换为秒

2026-11-03 20:04:14