JavaScript：适配多设备像素比的图片裁剪代码问题排查

原代码在高DPR（设备像素比）设备下失效，核心是Canvas尺寸与上下文缩放不匹配，以及像素扫描用错了尺寸基准：

1. Canvas实际像素尺寸未乘以DPR，但上下文执行了scale(DPR, DPR)，导致绘制的图像被截断/拉伸，无法完整覆盖Canvas。
2. 像素扫描逻辑始终用原始图片尺寸计算坐标，但imageData是基于Canvas实际像素的，DPR≠1时两者尺寸不匹配，直接导致像素定位错误。

function removeImageBlanks(imageObject, padding = 0, cornerRadius = 0) {
  const imgWidth = imageObject.width;
  const imgHeight = imageObject.height;
  const dpr = window.devicePixelRatio || 1;

  // 计算Canvas实际像素尺寸：原始尺寸 × DPR，适配高分辨率屏幕
  const canvasWidth = imgWidth * dpr;
  const canvasHeight = imgHeight * dpr;

  const canvas = document.createElement('canvas');
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;
  // 视觉尺寸设为原始图片大小，保证显示正常
  canvas.style.width = `${imgWidth}px`;
  canvas.style.height = `${imgHeight}px`;

  const context = canvas.getContext('2d');
  // 缩放上下文，匹配设备像素比
  context.scale(dpr, dpr);

  // 完整绘制原始图片到Canvas（基于缩放后的坐标系）
  context.drawImage(imageObject, 0, 0, imgWidth, imgHeight);

  const imageData = context.getImageData(0, 0, canvasWidth, canvasHeight);
  const data = imageData.data;

  // 获取像素RGB值：用Canvas实际宽度计算偏移量
  const getRGB = function(x, y) {
    const offset = canvasWidth * y + x;
    return {
      red: data[offset * 4],
      green: data[offset * 4 + 1],
      blue: data[offset * 4 + 2],
      opacity: data[offset * 4 + 3]
    };
  };

  const isWhite = function(rgb) {
    return rgb.red > 200 && rgb.green > 200 && rgb.blue > 200;
  };

  const scanY = function(fromTop) {
    const offset = fromTop ? 1 : -1;
    // 遍历Canvas实际高度的像素行
    for (let y = fromTop ? 0 : canvasHeight - 1; fromTop ? (y < canvasHeight) : (y > -1); y += offset) {
      for (let x = 0; x < canvasWidth; x++) {
        const rgb = getRGB(x, y);
        if (!isWhite(rgb)) {
          // 将Canvas像素坐标转回原始图片坐标
          const originalY = Math.floor(y / dpr);
          return fromTop ? originalY : Math.min(originalY + 1, imgHeight);
        }
      }
    }
    return null;
  };

  const scanX = function(fromLeft) {
    const offset = fromLeft ? 1 : -1;
    // 遍历Canvas实际宽度的像素列
    for (let x = fromLeft ? 0 : canvasWidth - 1; fromLeft ? (x < canvasWidth) : (x > -1); x += offset) {
      for (let y = 0; y < canvasHeight; y++) {
        const rgb = getRGB(x, y);
        if (!isWhite(rgb)) {
          // 将Canvas像素坐标转回原始图片坐标
          const originalX = Math.floor(x / dpr);
          return fromLeft ? originalX : Math.min(originalX + 1, imgWidth);
        }
      }
    }
    return null;
  };

  // 执行扫描，确定裁剪边界
  const top = scanY(true) || 0;
  const bottom = scanY(false) || imgHeight;
  const left = scanX(true) || 0;
  const right = scanX(false) || imgWidth;

  // 添加padding，避免裁剪过紧
  const paddedLeft = Math.max(0, left - padding);
  const paddedTop = Math.max(0, top - padding);
  const paddedRight = Math.min(imgWidth, right + padding);
  const paddedBottom = Math.min(imgHeight, bottom + padding);

  // 创建最终裁剪后的Canvas
  const finalCanvas = document.createElement('canvas');
  const finalWidth = paddedRight - paddedLeft;
  const finalHeight = paddedBottom - paddedTop;
  finalCanvas.width = finalWidth * dpr;
  finalCanvas.height = finalHeight * dpr;
  finalCanvas.style.width = `${finalWidth}px`;
  finalCanvas.style.height = `${finalHeight}px`;

  const finalCtx = finalCanvas.getContext('2d');
  finalCtx.scale(dpr, dpr);

  // 处理圆角裁剪（如果需要）
  if (cornerRadius > 0) {
    finalCtx.beginPath();
    finalCtx.roundRect(0, 0, finalWidth, finalHeight, cornerRadius);
    finalCtx.clip();
  }

  // 绘制裁剪后的图像
  finalCtx.drawImage(
    imageObject,
    paddedLeft, paddedTop, finalWidth, finalHeight,
    0, 0, finalWidth, finalHeight
  );

  return finalCanvas;
}

• Canvas尺寸适配：将Canvas实际像素设为原始尺寸×DPR，保证高DPR设备下图像绘制无失真。
• 坐标转换：扫描Canvas像素后，将坐标除以DPR转回原始图片坐标，确保裁剪边界计算准确。
• 完整流程补全：原代码缺少扫描后的裁剪实现，修复后补充了padding添加、圆角处理和最终图像生成逻辑。

内容的提问来源于stack exchange，提问作者John Seong