前端 Canvas 图片处理实践：拼图、长图拼接和分镜切图

最近做了一组浏览器端图片处理能力，主要覆盖三类场景：

多图排版；
多张图片拼成长图；
按网格、参考线或主体区域切分图片。

这篇记录一下前端实现时的一些思路和取舍。重点不在 UI，而是图片读取、画布绘制、尺寸计算、导出和性能边界。

案例地址：羊咩像素 - 免费在线拼图与智能九宫格切图分图工具

1. 为什么放在浏览器端处理

图片处理可以放在服务端，也可以放在浏览器端。对于轻量任务来说，浏览器端有几个特点：

减少文件上传流程；
用户选择图片后可以直接进入处理逻辑；
适合拼接、裁剪、缩放、导出这类 Canvas 能完成的操作；
服务器不需要参与图片计算，整体结构更简单。

当然，浏览器端处理也不是万能的。图片尺寸过大时，会受到设备内存、浏览器 Canvas 尺寸限制、移动端性能等因素影响。

所以这类能力更适合定位为轻量图片处理，而不是完整替代专业图像软件。

2. 图片读取流程

前端处理图片时，通常会经历几个步骤：

通过 input[type=file] 或拖拽获取文件；
使用 URL.createObjectURL 或 FileReader 读取图片；
使用 Image 或 createImageBitmap 解码；
根据业务需要计算目标尺寸；
绘制到 Canvas；
使用 toBlob 或 toDataURL 导出结果。

示意代码如下：

复制代码

async function loadImage(file) {
  const url = URL.createObjectURL(file);

  try {
    const image = new Image();
    image.src = url;
    await image.decode();
    return image;
  } finally {
    URL.revokeObjectURL(url);
  }
}

如果需要处理多张图片，最好先统一完成解码，再进入尺寸计算和绘制阶段。这样可以避免绘制过程中不断等待异步图片加载。

3. 多图排版

多图排版的核心问题是布局计算。

常见的拼图场景包括：

文章配图；
多张截图整理；
产品图组合展示；
社交平台多图预览；
教程步骤图整理。

实现时可以把每张图片抽象成一个矩形区域：

复制代码

const item = {
  x: 0,
  y: 0,
  width: 300,
  height: 200,
  image
};

然后根据模板或用户设置，计算每个区域的位置、宽高、间距和裁剪方式。

图片适配方式一般有两种：

contain：完整显示图片，可能出现留白；
cover：填满目标区域，可能裁掉边缘。

在实际场景中，这两个模式都需要保留。比如产品图通常希望主体完整，截图类内容也不适合随意裁切；而封面拼图更常使用填满区域的方式。

4. 长图拼接

长图拼接本质上是把多张图片按顺序绘制到同一张 Canvas 上。

它的常见使用场景包括：

软件教程步骤图；
页面截图合并；
聊天记录整理；
测评图、对比图整理；
电商详情图拼接；
商品卖点图、活动海报切片合并。

纵向拼接时，需要先确定目标宽度，再计算每张图缩放后的高度：

复制代码

function getScaledSize(image, targetWidth) {
  const ratio = targetWidth / image.width;

  return {
    width: targetWidth,
    height: Math.round(image.height * ratio)
  };
}

随后累加所有图片高度，得到最终 Canvas 高度：

复制代码

function getCanvasHeight(images, targetWidth, gap) {
  return images.reduce((total, image, index) => {
    const size = getScaledSize(image, targetWidth);
    return total + size.height + (index > 0 ? gap : 0);
  }, 0);
}

绘制阶段则按顺序维护一个 offsetY：

复制代码

function drawVerticalImages(ctx, images, targetWidth, gap) {
  let offsetY = 0;

  for (const image of images) {
    const size = getScaledSize(image, targetWidth);
    ctx.drawImage(image, 0, offsetY, size.width, size.height);
    offsetY += size.height + gap;
  }
}

电商详情图是比较典型的长图拼接场景。很多详情页素材会按模块拆分制作，最终需要合并成一张连续长图。这里要注意宽度统一、模块顺序、背景色和导出清晰度。

5. 网格切图

规则切图比较直接，核心是根据行列数计算每个切片的区域。

例如把一张图切成 rows x cols：

复制代码

function getGridRects(width, height, rows, cols) {
  const cellWidth = width / cols;
  const cellHeight = height / rows;
  const rects = [];

  for (let row = 0; row < rows; row++) {
    for (let col = 0; col < cols; col++) {
      rects.push({
        x: Math.round(col * cellWidth),
        y: Math.round(row * cellHeight),
        width: Math.round(cellWidth),
        height: Math.round(cellHeight)
      });
    }
  }

  return rects;
}

这种方式适合九宫格、固定比例切图、规则素材拆分等场景。

需要注意的是，小数取整可能导致最后一行或最后一列出现 1 像素误差。更稳妥的做法是最后一列使用原图右边界计算宽度，最后一行使用原图底边界计算高度。

6. 参考线切图

不是所有图片都适合等分。

比如：

漫画、条漫；
漫剧分镜；
长信息图；
电商详情页；
活动页截图；
复杂教程图。

这类图片往往需要按内容边界切分。固定高度切图可能会切断对白、人物、标题或商品模块。

一种更实用的方式是维护水平或垂直参考线数组：

复制代码

const horizontalLines = [0, 420, 860, 1320, imageHeight];

相邻两条线之间就是一个切片：

复制代码

function getLineRects(width, lines) {
  const rects = [];

  for (let i = 0; i < lines.length - 1; i++) {
    rects.push({
      x: 0,
      y: lines[i],
      width,
      height: lines[i + 1] - lines[i]
    });
  }

  return rects;
}

处理漫剧分镜时，可以把参考线移动到镜头边界；处理详情页时，可以按模块切分；处理信息图时，可以按段落切分。

这种方式比自动等分多一步人工调整，但结果通常更可控。

7. 基于轮廓的素材拆分

如果图片里有多个相对独立的主体，也可以尝试使用 OpenCV.js 做辅助识别。

常见流程大致是：

Canvas 图像转为 OpenCV Mat；
灰度化；
阈值或边缘检测；
查找轮廓；
过滤面积过小或比例异常的区域；
根据外接矩形生成切片；
批量导出。

这类方式适合背景比较干净、主体之间有明显间隔的素材图。

如果主体重叠严重、背景复杂，还是需要人工修正。

也就是说，轮廓识别更适合作为半自动辅助能力，而不是完全自动化切图方案。

8. 导出方式

单张图片可以直接使用 canvas.toBlob：

复制代码

function canvasToBlob(canvas, type = "image/png", quality = 0.92) {
  return new Promise((resolve) => {
    canvas.toBlob(resolve, type, quality);
  });
}

多张切片导出时，可以逐张生成 Blob。

如果需要批量下载，可以再打包成 ZIP。

导出时需要注意：

PNG 适合截图、带透明背景的素材；
JPEG 适合照片类图片；
WebP 体积更小，但兼容性需要按目标场景判断；
大尺寸 Canvas 导出可能比较耗时；
移动端浏览器可能对超大 Canvas 支持不稳定。

9. 性能和边界

前端图片处理主要需要关注这些问题：

避免一次性创建过多大 Canvas；
图片解码后及时释放对象 URL；
大图导出尽量使用 toBlob，不要优先使用 toDataURL；
移动端需要限制最大处理尺寸；
批量切图时要控制并发；
对异常图片、空文件、损坏文件做容错。

如果图片很大，可以先按最大边长做一次等比缩放，再进入后续处理流程。

10. 小结

浏览器端完成拼图、长图拼接和切图是可行的，核心依赖是 Canvas 的绘制和导出能力。

其中：

拼图重点在布局计算；
长图拼接重点在尺寸统一和顺序绘制；
网格切图重点在切片坐标计算；
分镜切图重点在参考线交互；
智能拆分重点在轮廓识别和人工校正。

这类功能适合处理高频、轻量的图片任务。真正复杂的修图、精细抠图和大规模图像处理，仍然更适合交给专业软件或服务端任务队列处理。