如何获取图片选中区域的平均RGB颜色值？

你的代码核心问题是逻辑耦合+变量作用域错误：把Jcrop初始化和颜色计算混在一个函数里，而且选中区域的参数根本没传递给计算逻辑，导致始终在算整张图的平均色。下面是修正后的完整代码，附详细说明：

问题拆解 #

• 原getRGB函数里，Jcrop的onSelect回调是异步触发的，函数会直接跳过回调执行完整张图的计算并返回结果，完全没用到选中的区域参数
• onSelect里定义的dx/dy/dw/dh是局部变量，外部的计算逻辑根本拿不到这些值
• 每次调用getRGB都会重复初始化Jcrop，导致交互混乱

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Jcrop 区域取色示例</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.css">
</head>
<body>
  <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAIAAAD/gAIDAAABD0lEQVR4nOzSMQ0CYRgEUUJOAQUmMIEQapycA4IZbCEAA38z1ccl7ynYTHbb9+/p/zxe9+kJC+fpAUciViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFaw3a7v6Q0Ll+dnesKCZwViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgViBWIFYgW/AAAA//+j+wYF8oSWtwAAAABJRU5ErkJggg==" />
  <div>
    <p class='inr'>R: </p>
    <p class='ing'>G: </p>
    <p class='inb'>B: </p>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.js"></script>
  <script>
    // 页面加载完成后初始化Jcrop
    $(function() {
      $('#img').Jcrop({
        // 用户选中区域时触发计算
        onSelect: calculateAreaRGB,
        // 调整选区时同步更新
        onChange: calculateAreaRGB
      });
      
      // 先计算整张图的平均色作为初始值
      const fullImgData = {
        x: 0, 
        y: 0, 
        w: $('#img')[0].naturalWidth, 
        h: $('#img')[0].naturalHeight
      };
      const fullRGB = calculateAreaRGB(fullImgData);
      updateDisplay(fullRGB);
    });

    // 计算指定区域的平均RGB值
    function calculateAreaRGB(cropData) {
      const img = $('#img')[0];
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');
      const rgb = {r:0, g:0, b:0};
      
      // 设置canvas尺寸为选中区域的大小
      canvas.width = cropData.w;
      canvas.height = cropData.h;
      
      // 只绘制选中的区域到canvas
      ctx.drawImage(
        img,
        cropData.x, cropData.y, cropData.w, cropData.h, // 原图上的裁剪区域
        0, 0, cropData.w, cropData.h // 绘制到canvas的位置和大小
      );
      
      // 获取该区域的像素数据
      const imageData = ctx.getImageData(0, 0, cropData.w, cropData.h);
      const data = imageData.data;
      const pixelCount = cropData.w * cropData.h;
      
      // 遍历所有像素计算平均值
      for(let i=0; i<data.length; i+=4) {
        rgb.r += data[i];
        rgb.g += data[i+1];
        rgb.b += data[i+2];
      }
      
      rgb.r = Math.round(rgb.r / pixelCount);
      rgb.g = Math.round(rgb.g / pixelCount);
      rgb.b = Math.round(rgb.b / pixelCount);
      
      // 更新页面显示
      updateDisplay(rgb);
      return rgb;
    }

    // 更新页面上的RGB数值显示
    function updateDisplay(rgb) {
      $('.inr').text(`R: ${rgb.r}`);
      $('.ing').text(`G: ${rgb.g}`);
      $('.inb').text(`B: ${rgb.b}`);
    }
  </script>
</body>
</html>

关键修正点 #

1. 分离逻辑：把Jcrop初始化、区域计算、显示更新拆成独立函数，代码结构更清晰
2. 参数正确传递：直接把Jcrop返回的cropData（包含x/y/w/h）传给计算函数，确保用选中区域计算
3. 精准绘制区域：drawImage只把选中的区域画到canvas，减少不必要的计算量
4. 实时同步更新：用户选中或调整选区时，自动触发计算并更新页面显示
5. 初始值处理：页面加载完成后先计算整张图的平均色，提升初始交互体验

内容的提问来源于stack exchange，提问作者Dheeraj Kumar