如何在HTML5 Canvas中单独放大图像边框并保留内部区域？

针对你的需求，不需要纠结getImageData()的区域限制，有两种高效实现方式：

方法一：直接重绘（推荐） #

利用你已知的图像结构（1px白边框+15x15黑核心），直接在新画布上构建目标图像，无需遍历像素：

1. 计算新画布尺寸：核心15x15 + 3px边框×2 → 总尺寸21x21
2. 先填充整个画布为白色（实现3px边框）
3. 再将原图像的15x15核心区域绘制到新画布的中间位置（坐标(3,3)）

代码示例：

// 假设原画布已存在并绘制好图像
const originalCanvas = document.getElementById('original');
// 创建新画布
const newCanvas = document.createElement('canvas');
newCanvas.width = 21;
newCanvas.height = 21;
const newCtx = newCanvas.getContext('2d');

// 绘制3px白色边框
newCtx.fillStyle = '#ffffff';
newCtx.fillRect(0, 0, newCanvas.width, newCanvas.height);

// 绘制原图像的15x15核心区域（替换原核心的位置和尺寸）
newCtx.drawImage(originalCanvas, 1, 1, 15, 15, 3, 3, 15, 15);

// 把新画布添加到页面
document.body.appendChild(newCanvas);

方法二：操作ImageData像素（按需选择） #

如果必须通过读取原图像像素实现，可以遍历像素并判断区域：

1. 获取原画布的ImageData
2. 创建尺寸为21x21的新ImageData
3. 遍历新图像每个像素：
   • 若属于边框区域（x<3 / x≥18 / y<3 / y≥18），设为白色
   • 若属于核心区域，从原图像对应位置复制像素值

代码示例：

const originalCanvas = document.getElementById('original');
const ctx = originalCanvas.getContext('2d');
const originalImgData = ctx.getImageData(0, 0, 16, 16);
const originalPixels = originalImgData.data;

// 创建新图像数据
const newWidth = 21;
const newHeight = 21;
const newImgData = ctx.createImageData(newWidth, newHeight);
const newPixels = newImgData.data;

// 遍历填充新像素
for (let y = 0; y < newHeight; y++) {
  for (let x = 0; x < newWidth; x++) {
    const pixelIndex = (y * newWidth + x) * 4;
    // 判断是否为边框区域
    if (x < 3 || x >= newWidth - 3 || y < 3 || y >= newHeight - 3) {
      // 设置白色像素
      newPixels[pixelIndex] = 255;
      newPixels[pixelIndex + 1] = 255;
      newPixels[pixelIndex + 2] = 255;
      newPixels[pixelIndex + 3] = 255;
    } else {
      // 对应原图像的核心像素位置
      const originalX = x - 2;
      const originalY = y - 2;
      const originalPixelIndex = (originalY * 16 + originalX) * 4;
      // 复制原像素值
      newPixels[pixelIndex] = originalPixels[originalPixelIndex];
      newPixels[pixelIndex + 1] = originalPixels[originalPixelIndex + 1];
      newPixels[pixelIndex + 2] = originalPixels[originalPixelIndex + 2];
      newPixels[pixelIndex + 3] = originalPixels[originalPixelIndex + 3];
    }
  }
}

// 渲染新图像
const newCanvas = document.createElement('canvas');
newCanvas.width = newWidth;
newCanvas.height = newHeight;
const newCtx = newCanvas.getContext('2d');
newCtx.putImageData(newImgData, 0, 0);
document.body.appendChild(newCanvas);

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