如何捕获Canvas超出画布区域的全部内容？

核心思路 #

Canvas是固定尺寸的绘图表面，投影、外发光这类滤镜会在画布外绘制像素，但toBlob/getImageData只能提取画布范围内的内容。解决核心是：先计算包含所有内容+滤镜效果的最小包围盒，再将内容重绘到刚好匹配该包围盒的新Canvas中。

具体步骤 #

1. 测量所有元素的原始边界 #

• 图片元素：已知宽高（设为imgW, imgH）和绘制位置（imgX, imgY），原始边界为[imgX, imgY, imgX+imgW, imgY+imgH]
• 文本元素：
  • 用CanvasRenderingContext2D.measureText()获取文本宽度
  • 文本高度可通过字体大小估算（通常为字体大小的1.2~1.5倍），或创建隐藏DOM元素精确测量：

    function getTextHeight(fontStyle) {
      const span = document.createElement('span');
      span.textContent = 'Hg'; // 包含上下部的字符，确保测量准确
      span.style.cssText = `font: ${fontStyle}; position: absolute; visibility: hidden;`;
      document.body.appendChild(span);
      const height = span.offsetHeight;
      document.body.removeChild(span);
      return height;
    }
    

  • 文本的原始边界为[textX, textY - textH, textX+textW, textY]（textY是Canvas文本绘制的基线位置，顶部需减去文本高度）

2. 计算滤镜的扩展范围 #

根据使用的滤镜类型，计算需要向四周扩展的像素量：

• 投影（drop-shadow）：滤镜格式为drop-shadow(offsetX offsetY blurRadius color)，则：
  • 水平扩展量：blurRadius + Math.abs(offsetX)
  • 垂直扩展量：blurRadius + Math.abs(offsetY)
• 外发光：用drop-shadow(0 0 blurRadius color)模拟时，扩展量为blurRadius（四个方向）
• 多滤镜叠加时，取所有滤镜中最大的扩展量

3. 计算整体包围盒 #

收集所有元素的原始边界，计算：

• 最小X：所有元素的最小x值 - 水平扩展量
• 最小Y：所有元素的最小y值 - 垂直扩展量
• 最大X：所有元素的最大x值 + 水平扩展量
• 最大Y：所有元素的最大y值 + 垂直扩展量
• 新Canvas尺寸：width = maxX - minX，height = maxY - minY

4. 重绘内容到新Canvas #

创建新Canvas，将所有元素平移（-minX, -minY）后绘制，确保所有内容（包括滤镜效果）都在画布内，再应用滤镜并提取数据。

示例代码（图片+投影场景） #

针对你提供的示例，修改为完整可运行版本：

// 已知图片参数
const imgSource = 'your-image-url';
const imgW = 200; // 图片原始宽度
const imgH = 150; // 图片原始高度
const imgX = 0;
const imgY = 0;

// 滤镜参数
const shadowOffsetX = 0;
const shadowOffsetY = 0;
const shadowBlur = 25;
const shadowColor = 'black';
const horizontalExpand = shadowBlur + Math.abs(shadowOffsetX);
const verticalExpand = shadowBlur + Math.abs(shadowOffsetY);

// 计算整体包围盒
const minX = imgX - horizontalExpand;
const minY = imgY - verticalExpand;
const maxX = imgX + imgW + horizontalExpand;
const maxY = imgY + imgH + verticalExpand;
const canvasWidth = maxX - minX;
const canvasHeight = maxY - minY;

// 创建新Canvas
const canvas = document.createElement('canvas');
canvas.width = canvasWidth;
canvas.height = canvasHeight;
const ctx = canvas.getContext('2d');

// 应用滤镜
ctx.filter = `drop-shadow(${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px ${shadowColor})`;

// 加载图片并平移绘制
const img = new Image();
img.crossOrigin = 'anonymous'; // 跨域图片需设置
img.onload = () => {
  // 平移位置，确保内容完全落在新画布内
  ctx.drawImage(img, imgX - minX, imgY - minY, imgW, imgH);
  
  // 提取图像数据
  canvas.toBlob((blob) => {
    // 示例：下载文件
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'canvas-with-shadow.png';
    a.click();
    URL.revokeObjectURL(url);
  }, 'image/png');
};
img.src = imgSource;

补充：包含文本元素的场景 #

如果需要处理文本，先测量文本尺寸再合并包围盒：

// 文本参数
const text = 'Hello World';
const fontStyle = '24px Arial';
const textX = 50;
const textY = 100;

// 测量文本尺寸
ctx.font = fontStyle;
const textW = ctx.measureText(text).width;
const textH = getTextHeight(fontStyle); // 使用前面定义的getTextHeight函数

// 文本原始边界
const textMinX = textX;
const textMinY = textY - textH;
const textMaxX = textX + textW;
const textMaxY = textY;

// 合并图片和文本的边界
const globalMinX = Math.min(imgX, textMinX) - horizontalExpand;
const globalMinY = Math.min(imgY, textMinY) - verticalExpand;
const globalMaxX = Math.max(imgX + imgW, textMaxX) + horizontalExpand;
const globalMaxY = Math.max(imgY + imgH, textMaxY) + verticalExpand;

// 创建Canvas并绘制（步骤同上）
// 绘制文本时同样需要平移
ctx.fillText(text, textX - globalMinX, textY - globalMinY);

关键注意点 #

• canvas.getBoundingClientRect()和getComputedStyle只能获取Canvas元素的DOM尺寸，无法获取内部内容（包括滤镜）的实际范围，完全没用
• 跨域图片必须设置crossOrigin = 'anonymous'，否则无法提取图像数据
• 自定义SVG滤镜的扩展范围计算逻辑和CSS滤镜一致，需提前分析滤镜的扩散区域

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