如何从Canvas的imageData中提取图形边缘与轮廓多边形？

原方案失效原因 #

原代码无法得到预期效果，是几个逻辑问题共同导致的：

• 点顺序错误：收集到的边缘点是按逐行遍历像素的顺序存储的，并非沿轮廓走向的连续有序点，直接按这个顺序调用lineTo连线必然产生大量交叉乱线，无法形成闭合轮廓
• 透明度判断错误：代码里判断像素是否不透明只校验了R通道值是否为0，实际上透明像素的R/G/B值不一定为0，只有每个像素第4位的alpha通道值才能正确表示透明度
• 检测逻辑不全：只判断了上下左右4个方向的邻点，没有处理画布边缘像素的数组越界问题，也没有适配图形抗锯齿产生的半透明像素，漏检、错检边缘点的情况很多

可直接使用的实现方案 #

方案1：像素级轮廓（实现简单，效果匹配需求） #

不需要收集点再排序连线，直接生成一张和画布等大的透明图像，只把检测到的边缘像素设为黑色不透明，最后贴回画布即可，完全规避点排序的问题，实现代码如下：

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const { width: w, height: h } = canvas;
const imgData = ctx.getImageData(0, 0, w, h);
const sourceData = imgData.data;
// 初始化全透明的边缘图像数据
const edgeData = new Uint8ClampedArray(sourceData.length);
// 透明度阈值，适配抗锯齿半透明像素
const ALPHA_THRESHOLD = 10;

for (let y = 0; y < h; y++) {
  for (let x = 0; x < w; x++) {
    const currentIdx = (y * w + x) * 4;
    const currentAlpha = sourceData[currentIdx + 3];
    // 当前像素透明则跳过
    if (currentAlpha < ALPHA_THRESHOLD) continue;

    let isEdge = false;
    // 遍历8邻域检测边缘，比4邻域结果更准确
    for (let dy = -1; dy <= 1; dy++) {
      for (let dx = -1; dx <= 1; dx++) {
        if (dx === 0 && dy === 0) continue;
        const neighborX = x + dx;
        const neighborY = y + dy;
        // 邻点超出画布边界，当前点属于边缘
        if (neighborX < 0 || neighborX >= w || neighborY < 0 || neighborY >= h) {
          isEdge = true;
          break;
        }
        const neighborIdx = (neighborY * w + neighborX) * 4;
        const neighborAlpha = sourceData[neighborIdx + 3];
        // 邻点为透明，当前点属于边缘
        if (neighborAlpha < ALPHA_THRESHOLD) {
          isEdge = true;
          break;
        }
      }
      if (isEdge) break;
    }

    // 标记边缘点为纯黑不透明
    if (isEdge) {
      edgeData[currentIdx] = 0;
      edgeData[currentIdx + 1] = 0;
      edgeData[currentIdx + 2] = 0;
      edgeData[currentIdx + 3] = 255;
    }
  }
}

// 清空画布后绘制生成的轮廓
ctx.clearRect(0, 0, w, h);
ctx.putImageData(new ImageData(edgeData, w, h), 0, 0);

方案2：矢量轮廓多边形（支持缩放、路径编辑） #

如果需要得到可二次编辑的矢量路径，可按以下步骤实现：

1. 遍历像素找到图形最左上角的第一个非透明像素，作为轮廓追踪起点
2. 采用Moore邻域追踪算法/行进方块（Marching Squares）算法，从起点开始沿边缘顺时针追踪，按顺序记录所有轮廓点，直到回到起点形成闭合路径
3. 可选：使用道格拉斯-普克算法对收集到的点做抽稀处理，去除冗余点，得到更平滑简洁的多边形轮廓
4. 如果图形存在内部镂空，追踪完外轮廓后继续遍历剩余像素，找到内部区域的起点重复追踪流程，即可得到所有内轮廓
   如果不想手动实现复杂的追踪算法，也可以直接引入成熟的轮廓生成工具库，传入imageData即可直接得到标准的Canvas路径数据。

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