如何获取并显示裁剪后图片的(x1,y1)与(x2,y2)坐标

嘿，我来帮你搞定这个需求！要在展示裁剪后图片的同时显示裁剪区域的(x1,y1)和(x2,y2)坐标，咱们可以借助Cropper.js的内置事件实时获取并更新坐标，下面是具体的实现步骤和修改后的完整代码：

核心思路 #

• 在页面中添加用于显示坐标的DOM元素
• 初始化Cropper时监听crop事件，实时获取裁剪区域的坐标数据
• 将获取到的坐标渲染到页面上，同时保留原有裁剪后图片展示的功能

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Cropper.js - 裁剪并显示坐标</title>
  <!-- 引入Cropper样式（请确保本地路径正确） -->
  <link rel="stylesheet" href="css/cropper.min.css">
  <link rel="stylesheet" href="css/style.css" />
  <style>
    /* 给坐标显示区域加个简单样式，方便查看 */
    .coordinates {
      margin-top: 20px;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .coordinates p {
      margin: 5px 0;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <!-- 图片上传控件 -->
  <input type="file" id="imageUpload" accept="image/*">
  
  <!-- 裁剪容器 -->
  <div style="margin: 20px 0;">
    <img id="cropImage" src="" alt="待裁剪图片" style="max-width: 100%;">
  </div>
  
  <!-- 裁剪结果展示区 -->
  <div>
    <h3>裁剪后的图片</h3>
    <img id="croppedResult" src="" alt="裁剪结果" style="max-width: 100%;">
  </div>
  
  <!-- 坐标显示区 -->
  <div class="coordinates">
    <h3>裁剪区域坐标</h3>
    <p>左上角：(<span id="x1">0</span>, <span id="y1">0</span>)</p>
    <p>右下角：(<span id="x2">0</span>, <span id="y2">0</span>)</p>
  </div>

  <!-- 引入Cropper.js（请确保本地路径正确） -->
  <script src="js/cropper.min.js"></script>
  <script>
    const imageUpload = document.getElementById('imageUpload');
    const cropImage = document.getElementById('cropImage');
    const croppedResult = document.getElementById('croppedResult');
    let cropperInstance;

    // 监听图片上传事件
    imageUpload.addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function(event) {
        cropImage.src = event.target.result;
        
        // 销毁旧的裁剪实例，避免冲突
        if (cropperInstance) {
          cropperInstance.destroy();
        }

        // 初始化新的裁剪实例
        cropperInstance = new Cropper(cropImage, {
          aspectRatio: 1, // 可根据需求调整比例，比如16/9、4/3等
          viewMode: 1,
          autoCropArea: 0.8, // 默认裁剪区域占图片的80%
          // 裁剪事件：实时更新坐标
          crop(event) {
            const { x, y, width, height } = event.detail;
            // 计算并渲染坐标（取整让显示更友好）
            document.getElementById('x1').textContent = Math.round(x);
            document.getElementById('y1').textContent = Math.round(y);
            document.getElementById('x2').textContent = Math.round(x + width);
            document.getElementById('y2').textContent = Math.round(y + height);
          }
        });
      };
      reader.readAsDataURL(file);
    });

    // 添加裁剪完成按钮（如果原有代码没有可直接用）
    document.body.insertAdjacentHTML('beforeend', `<button id="cropBtn" style="margin-top:10px;padding:8px 16px;">完成裁剪</button>`);
    document.getElementById('cropBtn').addEventListener('click', function() {
      if (!cropperInstance) return;
      
      // 获取裁剪后的图片
      const croppedCanvas = cropperInstance.getCroppedCanvas({
        maxWidth: 800,
        maxHeight: 800
      });
      // 展示裁剪结果
      croppedResult.src = croppedCanvas.toDataURL();
    });
  </script>
</body>
</html>

关键代码说明 #

• 坐标获取逻辑：在crop事件中，event.detail包含裁剪区域的核心数据：
  • x和y对应裁剪区域左上角的像素坐标（即(x1,y1)）
  • width和height是裁剪区域的尺寸，右下角坐标(x2,y2)可通过x+width和y+height计算得到
• 实时更新：每次拖动裁剪框、调整裁剪大小或初始化裁剪时，crop事件都会触发，确保坐标实时同步
• 实例管理：每次上传新图片时销毁旧的Cropper实例，避免多个实例冲突

内容的提问来源于stack exchange，提问作者Suresh Sp