如何在HTML5 Canvas或Fabric.js中实现自定义形状图像边缘羽化

shadowBlur 生成的是形状外侧的投影效果，本质是额外叠加的模糊层，无法实现形状本身边缘渐隐融入背景的效果。针对不规则手绘形状的羽化需求，核心逻辑是对形状的alpha（透明度）通道做高斯模糊，让边缘从实心自然过渡到全透明，以下提供两种可直接落地的实现方案：

方案一：原生HTML5 Canvas API 实现 #

不需要引入第三方库，通过离屏Canvas处理像素，手动对alpha通道做高斯模糊实现羽化效果，完整代码如下：

<canvas id="canvas" width="300" height="300" style="background:green"></canvas>
<img id="shape" onload="run()" src="shape.png" style="display:none">
<script>
// 针对alpha通道的高斯模糊方法，不修改RGB颜色值
function blurAlphaChannel(imageData, radius = 6) {
  const data = imageData.data;
  const width = imageData.width;
  const height = imageData.height;
  const alphaData = new Uint8ClampedArray(width * height);

  // 提取原始alpha通道值
  for (let i = 0; i < data.length; i += 4) {
    alphaData[i / 4] = data[i + 3];
  }

  // 生成高斯核
  const sigma = radius / 3;
  const kernel = [];
  const kernelSize = radius * 2 + 1;
  let kernelSum = 0;
  for (let i = 0; i < kernelSize; i++) {
    const offset = i - radius;
    kernel[i] = Math.exp(-(offset * offset) / (2 * sigma * sigma));
    kernelSum += kernel[i];
  }
  for (let i = 0; i < kernelSize; i++) kernel[i] /= kernelSum;

  // 水平方向模糊
  const tempAlpha = new Uint8ClampedArray(alphaData);
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let val = 0;
      for (let k = -radius; k <= radius; k++) {
        const px = Math.min(width - 1, Math.max(0, x + k));
        val += alphaData[y * width + px] * kernel[k + radius];
      }
      tempAlpha[y * width + x] = val;
    }
  }

  // 垂直方向模糊，写回像素数据
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let val = 0;
      for (let k = -radius; k <= radius; k++) {
        const py = Math.min(height - 1, Math.max(0, y + k));
        val += tempAlpha[py * width + x] * kernel[k + radius];
      }
      const idx = (y * width + x) * 4;
      // RGB通道固定为白色，仅alpha通道使用模糊后的值
      data[idx] = 255;
      data[idx + 1] = 255;
      data[idx + 2] = 255;
      data[idx + 3] = val;
    }
  }
  return imageData;
}

function run() {
  const canvas = document.getElementById("canvas");
  const ctx = canvas.getContext("2d");
  const shapeImg = document.getElementById('shape');

  // 创建离屏Canvas处理素材
  const offscreen = document.createElement('canvas');
  offscreen.width = shapeImg.width;
  offscreen.height = shapeImg.height;
  const offCtx = offscreen.getContext('2d');
  offCtx.drawImage(shapeImg, 0, 0);

  // 抠除原图绿色区域，转为透明
  const imgData = offCtx.getImageData(0, 0, offscreen.width, offscreen.height);
  const pixelData = imgData.data;
  for (let i = 0; i < pixelData.length; i += 4) {
    const r = pixelData[i], g = pixelData[i+1], b = pixelData[i+2];
    // 识别绿色区域（可根据素材实际色值调整阈值）
    if (g > 100 && r < 60 && b < 60) {
      pixelData[i+3] = 0;
    } else {
      pixelData[i+3] = 255;
    }
  }

  // 对alpha通道做羽化模糊
  const featheredData = blurAlphaChannel(imgData, 6);
  offCtx.putImageData(featheredData, 0, 0);

  // 将处理完成的图形绘制到主画布
  ctx.drawImage(offscreen, 0, 0);
}
</script>

• 调整blurAlphaChannel调用时的第二个参数即可控制羽化范围，数值越大边缘柔和区域越宽
• 抠除绿色的RGB判断阈值可根据素材实际颜色调整，避免出现绿边或者形状被误抠除的问题
• 由于仅修改透明度通道，白色形状本身不会发虚，边缘会自然渐变融入下方绿色背景

方案二：Fabric.js 实现 #

引入Fabric.js库后可直接使用内置滤镜实现，不需要手动编写高斯模糊逻辑，代码更简洁：

<canvas id="canvas" width="300" height="300" style="background:green"></canvas>
<img id="shape" src="shape.png" style="display:none">
<script>
// 初始化Fabric画布
const canvas = new fabric.Canvas('canvas', {backgroundColor: 'green'});

fabric.Image.fromURL('shape.png', function(img) {
  // 滤镜1：移除原图绿色背景，转为透明
  const removeGreen = new fabric.Image.filters.RemoveColor({
    color: '#008000', // 对应素材的绿色值
    distance: 0.2, // 颜色容差，可根据素材调整
  });
  // 滤镜2：仅对alpha通道做模糊实现羽化
  const feather = new fabric.Image.filters.Blur({
    blur: 0.3, // 羽化程度，值越大边缘越柔和
    alphaOnly: true
  });

  img.filters.push(removeGreen, feather);
  img.applyFilters();
  canvas.add(img);
});
</script>

• 核心配置：alphaOnly: true 开启后，模糊效果只会作用在透明度通道，白色形状本身的颜色不会发虚，仅边缘做透明度渐变，完全匹配自然融入背景的需求
• 调整blur参数控制羽化宽度，调整distance参数控制绿色抠除的容差，适配不同手绘素材

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