首页
前端开发
HTML5
基于 jQuery Cropper 插件的头像裁剪功能实现

基于 jQuery Cropper 插件的头像裁剪功能实现

23 次浏览 0 条评论
zip
zip

介绍如何利用 jQuery Cropper 插件实现用户头像的动态裁剪功能。通过简单的代码示例，展示如何集成 Cropper 插件，并实现图片上传、拖拽裁剪、以及最终裁剪结果的获取。

<!DOCTYPE html>

<html>
<head>
  <title>头像裁剪</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css" rel="stylesheet"/>
  [removed][removed]
  [removed][removed]
</head>
<body>
  <input id="imageUpload" type="file"/>
  

    上传图片
  

  <button id="crop">裁剪</button>

  [removed]
    $(document).ready(function() {
      let cropper;

      $('#imageUpload').on('change', function(e) {
        const file = e.target.files[0];
        const reader = new FileReader();

        reader.onload = function(e) {
          $('#image').attr('src', e.target.result);
          initCropper();
        };
        reader.readAsDataURL(file);
      });

      $('#crop').click(function() {
        const croppedCanvas = cropper.getCroppedCanvas();
        // 将裁剪后的图片转换为 base64 格式
        const croppedImage = croppedCanvas.toDataURL();
        // 可以将 croppedImage 发送到服务器进行保存
        console.log(croppedImage); 
      });

      function initCropper() {
        cropper = new Cropper($('#image')[0], {
          aspectRatio: 1 / 1, // 设置裁剪比例
          viewMode: 2, // 设置裁剪框的显示模式
        });
      }
    });
  [removed]
</body>
</html>

代码说明:

  1. 引入必要的 CSS 和 JavaScript 文件，包括 jQuery 和 Cropper 插件。
  2. 创建一个文件上传按钮和一个用于显示图片的 img 元素。
  3. 使用 FileReader 对象读取用户选择的图片文件，并将其显示在 img 元素中。
  4. 初始化 Cropper 插件，设置裁剪比例和显示模式。
  5. 添加一个按钮，用于触发裁剪操作。
  6. 使用 cropper.getCroppedCanvas() 方法获取裁剪后的图片数据，并将其转换为 base64 格式。

通过以上步骤，即可实现一个简单的头像裁剪功能。

zip 文件大小：401.69KB