UniApp水印相机进阶：如何用canvas实现动态多行文本水印（附完整代码）

UniApp水印相机进阶：用Canvas实现动态多行文本水印的深度实践

在移动应用开发中，水印相机早已超越了简单的“拍照+文字”模式，演变为一种融合了身份验证、信息追溯和品牌展示的复合型功能。无论是企业内部用于记录工作进度的巡检拍照，还是电商平台要求卖家上传带有时效和地理位置证明的商品实拍，动态、可定制、信息量丰富的水印都成为了刚需。然而，当水印内容从简单的单行日期，扩展到包含长地址、多行描述、动态参数时，许多开发者会发现，市面上常见的解决方案开始捉襟见肘。

UniApp凭借其跨端优势，成为实现这类功能的热门选择。但原生camera组件在App端的局限性，迫使我们必须另辟蹊径。live-pusher直播推流组件因其强大的实时画面捕获能力，成为了在App端构建自定义相机的基石。而真正让水印变得“智能”和“优雅”的关键，则在于Canvas对动态多行文本的渲染能力。这不仅仅是文本的堆叠，更涉及到自动换行算法、样式继承、性能优化以及与原生相机视图的无缝融合。本文将带你深入这一技术组合的核心，从原理剖析到实战编码，构建一个真正可用的、支持复杂动态水印的UniApp相机解决方案。

1. 架构选型：为何是 live-pusher + Canvas？

在UniApp生态中，实现相机功能主要有几种路径：调用系统相机API、使用camera组件（小程序端）、或采用live-pusher组件。对于需要在App端实现应用内实时预览并**叠加复杂UI元素（水印）**的场景，live-pusher几乎是唯一成熟的选择。

live-pusher的核心优势在于：

• 应用内集成：无需跳转到系统相机应用，用户体验流程完整、可控。
• 实时预览层：它提供了一个真实的相机预览画面，我们可以在其上层通过cover-view、cover-image等组件叠加静态的水印指示元素（如提示文字、Logo图标）。
• 快照能力：通过snapshot方法，可以捕获当前预览画面的图像。但请注意，这里捕获的仅仅是相机画面，不包含叠加的cover-view水印。这是很多初学者容易误解的关键点。

那么，最终带水印的图片是如何产生的？这就引出了双阶段水印架构：

1. 预览阶段水印（UI层）：在live-pusher上层，使用cover-view显示水印文本（如用户名、实时更新的时间、地址）。这部分是给用户“看”的，用于确认拍摄内容和信息，但不会直接进入最终图片。
2. 合成阶段水印（Canvas层）：用户点击拍照后，我们获得一张纯背景图。随后，在一个离屏的Canvas上，重新绘制这张背景图，并调用Canvas的2D API，将水印信息（文本、图标等）精确地绘制到图像上，最终导出一张合成后的新图片。

这个架构清晰地将“预览”和“合成”解耦，带来了极大的灵活性。我们可以在Canvas合成阶段，实现远比cover-view更复杂的水印效果，例如多行文本自动换行、文字旋转、半透明背景、复杂字体样式等。

注意：live-pusher在nvue页面中的表现通常更稳定，尤其是在Android平台上。nvue的渲染机制与原生的契合度更高，能有效避免一些层级和性能问题。因此，本文的示例将基于nvue页面构建相机部分。

2. 构建实时预览相机页面（watermarkCamera.nvue）

我们首先构建相机预览页面。这个页面的核心是提供拍摄界面，并收集所有需要绘制的水印动态数据。

<template>
  <view class="live-camera" :style="{ width: windowWidth + 'px', height: windowHeight + 'px' }">
    <!-- 相机预览区域 -->
    <view class="preview">
      <live-pusher
        id="livePusher"
        ref="livePusher"
        class="livePusher"
        mode="HD"
        :beauty="0"
        :whiteness="0"
        :aspect="aspect"
        :min-bitrate="800"
        :audio-quality="'16KHz'"
        :device-position="cameraPosition"
        :auto-focus="true"
        :muted="true"
        :enable-camera="true"
        :enable-mic="false"
        :zoom="false"
        @statechange="onLivePusherStateChange"
        :style="{
          width: windowWidth + 'px',
          height: windowHeight + 'px'
        }"
      ></live-pusher>

      <!-- 预览层水印 (仅用于显示，不参与最终合成) -->
      <cover-view class="preview-watermark">
        <cover-text class="watermark-line">{{ watermarkData.userName }}</cover-text>
        <cover-text class="watermark-line">{{ watermarkData.location }}</cover-text>
        <cover-text class="watermark-line">{{ watermarkData.time }}</cover-text>
        <cover-text class="watermark-line">{{ watermarkData.customText }}</cover-text>
      </cover-view>
    </view>

    <!-- 底部操作栏 -->
    <view class="control-bar">
      <cover-image class="btn-flip" src="/static/camera/flip.png" @tap="switchCamera"></cover-image>
      <cover-image class="btn-capture" src="/static/camera/shutter.png" @tap="takeSnapshot"></cover-image>
      <cover-image class="btn-close" src="/static/camera/close.png" @tap="navigateBack"></cover-image>
    </view>
  </view>
</template>

<script>
let pusherContext = null;
export default {
  data() {
    return {
      windowWidth: 375,
      windowHeight: 667,
      aspect: '3:4', // 常用拍照比例
      cameraPosition: 'back',
      watermarkData: {
        userName: '访客',
        location: '定位中...',
        time: this.formatTime(new Date()),
        customText: '内部资料，严禁外传'
      },
      locationTimer: null,
      timeTimer: null
    };
  },
  onLoad() {
    this.initCameraParams();
    this.startDynamicDataUpdate();
  },
  onReady() {
    // 创建 live-pusher 上下文
    pusherContext = uni.createLivePusherContext('livePusher', this);
    this.startCameraPreview();
  },
  onUnload() {
    // 清理定时器
    if (this.locationTimer) clearInterval(this.locationTimer);
    if (this.timeTimer) clearInterval(this.timeTimer);
  },
  methods: {
    initCameraParams() {
      const sysInfo = uni.getSystemInfoSync();
      this.windowWidth = sysInfo.windowWidth;
      this.windowHeight = sysInfo.windowHeight;
      // 计算并设置合适的画面比例，避免拉伸
      const gcd = this.calcGCD(this.windowWidth, this.windowHeight);
      this.aspect = `${this.windowWidth / gcd}:${this.windowHeight / gcd}`;
    },
    // 开始动态更新水印数据（位置、时间）
    startDynamicDataUpdate() {
      // 获取初始位置
      this.updateLocation();
      // 每30秒更新一次位置（根据业务需求调整频率）
      this.locationTimer = setInterval(() => {
        this.updateLocation();
      }, 30000);

      // 时间每秒更新一次
      this.timeTimer = setInterval(() => {
        this.watermarkData.time = this.formatTime(new Date());
      }, 1000);
    },
    updateLocation() {
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: (res) => {
          if (res.address) {
            const addr = res.address;
            // 组装一个简洁的地址信息，避免过长
            this.watermarkData.location = `${addr.city || ''}${addr.district || ''}${addr.street || ''}`.substring(0, 20);
          }
        },
        fail: () => {
          this.watermarkData.location = '无法获取位置';
        }
      });
    },
    startCameraPreview() {
      if (pusherContext) {
        pusherContext.startPreview({
          success: () => console.log('相机预览启动成功'),
          fail: (err) => console.error('相机预览启动失败:', err)
        });
      }
    },
    takeSnapshot() {
      if (!pusherContext) return;
      // 1. 停止预览，准备捕获静态帧
      pusherContext.stopPreview();
      // 2. 执行快照
      pusherContext.snapshot({
        success: (res) => {
          const tempImagePath = res.tempImagePath;
          console.log('快照临时路径:', tempImagePath);
          // 3. 将快照图片和水印数据传递回上一个页面进行合成
          this.sendDataToPreviousPage(tempImagePath);
        },
        fail: (err) => {
          console.error('快照失败:', err);
          // 失败后重新开启预览
          this.startCameraPreview();
        }
      });
    },
    sendDataToPreviousPage(imagePath) {
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 2]; // 获取上一个页面实例
      if (prevPage && prevPage.$vm.watermarkImage) {
        // 调用上一个页面的方法，传入图片路径和完整水印数据
        prevPage.$vm.watermarkImage({
          src: imagePath,
          watermark: { ...this.watermarkData }
        });
      }
      // 返回上一页
      uni.navigateBack();
    },
    switchCamera() {
      this.cameraPosition = this.cameraPosition === 'back' ? 'front' : 'back';
    },
    navigateBack() {
      uni.navigateBack();
    },
    onLivePusherStateChange(e) {
      const code = e.detail.code;
      // 可以在这里处理不同的状态码，例如相机启动成功、失败等
      if (code === 1007) {
        console.log('相机连接成功');
      } else if (code === -1301) {
        console.warn('相机连接断开，尝试重连...');
      }
    },
    formatTime(date) {
      const opt = {
        "Y+": date.getFullYear().toString(),
        "m+": (date.getMonth() + 1).toString().padStart(2, '0'),
        "d+": date.getDate().toString().padStart(2, '0'),
        "H+": date.getHours().toString().padStart(2, '0'),
        "M+": date.getMinutes().toString().padStart(2, '0'),
        "S+": date.getSeconds().toString().padStart(2, '0')
      };
      let fmt = "YYYY-mm-dd HH:MM:SS";
      for (let k in opt) {
        const ret = new RegExp("(" + k + ")").exec(fmt);
        if (ret) {
          fmt = fmt.replace(ret[1], opt[k].padStart(ret[1].length, ret[1].length == 1 ? "" : "0"));
        }
      }
      return fmt;
    },
    // 计算最大公约数，用于简化比例
    calcGCD(a, b) {
      return b === 0 ? a : this.calcGCD(b, a % b);
    }
  }
};
</script>

<style scoped>
.live-camera {
  position: relative;
  background-color: #000;
}
.preview {
  position: relative;
}
.livePusher {
  display: block;
}
.preview-watermark {
  position: absolute;
  top: 40rpx;
  left: 20rpx;
  z-index: 100;
}
.watermark-line {
  display: block;
  color: rgba(255, 255, 255, 0.85);
  font-size: 32rpx;
  line-height: 1.5;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.control-bar {
  position: absolute;
  bottom: 60rpx;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 101;
}
.btn-capture {
  width: 120rpx;
  height: 120rpx;
}
.btn-flip,
.btn-close {
  width: 80rpx;
  height: 80rpx;
}
</style>

这个页面完成了实时预览、动态数据收集和快照捕获的工作。接下来，真正的挑战——在Canvas上实现动态多行文本水印——将在接收页面上展开。

3. Canvas核心：动态多行文本绘制算法

快照图片和水印数据已经传递到了上一个页面（例如一个takePhoto.vue页面）。这个页面需要完成核心的Canvas绘制工作。多行文本绘制的难点在于：如何根据设定的最大宽度，将一段长文本自动拆分成多行，并确保拆分点不会在单词中间（对于英文）或字符中间（对于中文），同时还要处理行数限制和溢出省略。

下面是一个健壮的多行文本绘制函数，它考虑了中英文混合的情况，并提供了良好的可配置性。

// 在 takePhoto.vue 页面的 methods 中
methods: {
  /**
   * 在Canvas上绘制多行文本
   * @param {Object} ctx - Canvas 2D上下文
   * @param {String} text - 要绘制的文本
   * @param {Number} x - 起始x坐标
   * @param {Number} y - 起始y坐标
   * @param {Number} maxWidth - 单行最大宽度（像素）
   * @param {Number} lineHeight - 行高（像素）
   * @param {Number} maxLines - 最大行数（超出部分省略）
   * @param {String} fontStyle - 字体样式字符串，如 'bold 16px sans-serif'
   * @param {String} textAlign - 文本对齐方式 'left'|'center'|'right'
   * @return {Number} - 返回绘制完成后，下一行的起始y坐标
   */
  drawWrappedText(ctx, text, x, y, maxWidth, lineHeight, maxLines, fontStyle = 'normal 14px sans-serif', textAlign = 'left') {
    ctx.font = fontStyle;
    ctx.textAlign = textAlign;
    ctx.textBaseline = 'top';

    const words = text.split('');
    let line = '';
    let currentLine = 1;
    let drawY = y;

    for (let i = 0; i < words.length; i++) {
      const testLine = line + words[i];
      const metrics = ctx.measureText(testLine);
      const testWidth = metrics.width;

      if (testWidth > maxWidth && i > 0) {
        // 绘制当前行
        ctx.fillText(line, x, drawY);
        // 换行
        drawY += lineHeight;
        currentLine++;
        // 检查是否超过最大行数
        if (currentLine > maxLines) {
          // 绘制省略号
          const ellipsis = '...';
          const ellipsisWidth = ctx.measureText(ellipsis).width;
          // 尝试从当前行去掉一些字符以容纳省略号
          while (ctx.measureText(line + ellipsis).width > maxWidth && line.length > 0) {
            line = line.substring(0, line.length - 1);
          }
          ctx.fillText(line + ellipsis, x, drawY - lineHeight);
          return drawY; // 返回最终的y坐标
        }
        // 重置新行
        line = words[i];
      } else {
        line = testLine;
      }
    }
    // 绘制最后一行
    ctx.fillText(line, x, drawY);
    return drawY + lineHeight;
  }
}

这个函数是绘制多行文本的基础。但在实际的水印相机场景中，水印往往是多组信息（如姓名、地址、时间、自定义标语）的集合，每组信息可能有独立的样式和位置要求。我们需要一个更高级的“水印配置器”。

4. 高级水印配置与批量绘制

让我们设计一个水印配置系统，允许开发者灵活地定义多个水印元素。

// 在 takePhoto.vue 的 data 或 methods 中定义水印配置
getWatermarkConfig(watermarkData) {
  // watermarkData 是从相机页面传过来的数据对象
  return [
    {
      type: 'text',
      content: `拍摄人：${watermarkData.userName}`,
      position: { x: 20, y: 30 },
      style: {
        font: 'bold 18px "PingFang SC", sans-serif',
        color: '#FFFFFF',
        textAlign: 'left',
        shadow: '2px 2px 4px rgba(0,0,0,0.8)'
      },
      wrap: {
        maxWidth: 300, // 最大宽度，超出自动换行
        lineHeight: 24,
        maxLines: 2
      }
    },
    {
      type: 'text',
      content: `地点：${watermarkData.location}`,
      position: { x: 20, y: 80 }, // y坐标可以动态计算，这里为示例
      style: {
        font: 'normal 16px "PingFang SC", sans-serif',
        color: 'rgba(255,255,255,0.9)',
        textAlign: 'left'
      },
      wrap: {
        maxWidth: 280,
        lineHeight: 22,
        maxLines: 3 // 地址可能较长，允许3行
      }
    },
    {
      type: 'text',
      content: `时间：${watermarkData.time}`,
      position: { x: 20, y: 160 }, // 需要根据上一个水印的结束位置动态计算
      style: {
        font: 'normal 15px monospace',
        color: '#CCCCCC',
        textAlign: 'left'
      },
      wrap: null // 不换行，单行显示
    },
    {
      type: 'text',
      content: watermarkData.customText,
      position: { x: 'center', y: 'bottom-50' }, // 支持相对定位
      style: {
        font: 'italic 20px sans-serif',
        color: '#FF9900',
        textAlign: 'center',
        shadow: '0 0 10px rgba(255,153,0,0.5)'
      },
      wrap: {
        maxWidth: 250,
        lineHeight: 26,
        maxLines: 2
      }
    }
    // 可以继续添加更多元素，如图片水印(type: 'image')、矩形背景等
  ];
}

有了配置，我们需要一个“渲染引擎”来解析这些配置并绘制到Canvas上。

// 核心绘制方法
async watermarkImage(options) {
  const { src, watermark } = options;
  // 1. 获取图片信息
  const imageInfo = await this.getImageInfoAsync(src);
  // 2. 创建离屏Canvas，尺寸与图片一致
  const canvasWidth = imageInfo.width;
  const canvasHeight = imageInfo.height;
  this.canvasSize = { width: canvasWidth, height: canvasHeight };

  // 使用Promise和setTimeout确保Canvas尺寸已更新
  await new Promise(resolve => setTimeout(resolve, 50));

  const ctx = uni.createCanvasContext('watermarkCanvas', this);
  
  // 3. 绘制原图作为背景
  ctx.drawImage(src, 0, 0, canvasWidth, canvasHeight);

  // 4. 获取水印配置
  const configs = this.getWatermarkConfig(watermark);
  let currentYOffset = 0; // 用于动态计算Y坐标

  // 5. 遍历配置并绘制
  for (const config of configs) {
    if (config.type === 'text') {
      // 解析位置（支持绝对像素值和相对值如 'center', 'bottom-xx'）
      let x = config.position.x;
      let y = config.position.y;

      if (x === 'center') {
        x = canvasWidth / 2;
        ctx.textAlign = 'center';
      } else if (x === 'right') {
        x = canvasWidth - 20; // 假设右边距20
        ctx.textAlign = 'right';
      } else {
        ctx.textAlign = config.style.textAlign || 'left';
      }

      if (y === 'bottom') {
        y = canvasHeight - 20;
      } else if (typeof y === 'string' && y.startsWith('bottom-')) {
        const offset = parseInt(y.replace('bottom-', ''), 10);
        y = canvasHeight - offset;
      } else if (y === 'auto') {
        // 自动接在上一个元素后面
        y = 30 + currentYOffset; // 基础顶部间距 + 偏移
      }

      // 设置样式
      ctx.font = config.style.font;
      ctx.fillStyle = config.style.color;
      if (config.style.shadow) {
        // 简单解析阴影，实际项目可用更复杂的解析器
        const shadowParts = config.style.shadow.split(' ');
        ctx.shadowOffsetX = parseInt(shadowParts[0]);
        ctx.shadowOffsetY = parseInt(shadowParts[1]);
        ctx.shadowBlur = parseInt(shadowParts[2]);
        ctx.shadowColor = shadowParts[3];
      }

      // 绘制文本
      if (config.wrap) {
        // 多行绘制
        currentYOffset = this.drawWrappedText(
          ctx,
          config.content,
          x,
          y,
          config.wrap.maxWidth,
          config.wrap.lineHeight,
          config.wrap.maxLines,
          config.style.font,
          ctx.textAlign
        ) - y; // 计算本次绘制占用的高度
      } else {
        // 单行绘制
        ctx.fillText(config.content, x, y);
        currentYOffset = config.style.lineHeight || 20; // 单行默认高度
      }
      // 重置阴影，避免影响下一个元素
      ctx.shadowOffsetX = 0;
      ctx.shadowOffsetY = 0;
      ctx.shadowBlur = 0;
    }
    // 这里可以扩展处理 type === 'image' 等
  }

  // 6. 执行绘制并导出图片
  ctx.draw(false, () => {
    uni.canvasToTempFilePath({
      canvasId: 'watermarkCanvas',
      destWidth: canvasWidth,
      destHeight: canvasHeight,
      quality: 0.95, // 输出质量
      fileType: 'jpg',
      success: (res) => {
        const watermarkedPath = res.tempFilePath;
        this.saveWatermarkedImage(watermarkedPath);
        // 可以预览或上传
        this.previewImage = watermarkedPath;
      },
      fail: (err) => {
        console.error('Canvas导出失败:', err);
      }
    }, this);
  });
},

// 异步获取图片信息的辅助方法
getImageInfoAsync(src) {
  return new Promise((resolve, reject) => {
    uni.getImageInfo({
      src,
      success: resolve,
      fail: reject
    });
  });
}

通过这种配置化的方式，水印的样式、位置、换行规则都变得高度可定制。你可以轻松地调整getWatermarkConfig函数来生成不同的水印效果，而无需修改核心绘制逻辑。

5. 性能优化与平台兼容性实战

在真实项目中，性能和多端兼容性是必须跨越的坎。以下是我在实践中总结的几个关键点和解决方案：

1. Canvas尺寸与图片分辨率： live-pusher的snapshot输出的图片分辨率与设备屏幕分辨率相关。在高端手机上，图片可能非常大（例如 1440x2560）。直接在如此大的Canvas上绘制文本，然后导出，可能会导致内存压力增大和操作缓慢。

• 优化策略：根据实际显示需求，对Canvas输出尺寸进行限制。例如，如果水印图片最终只是在App内展示或上传到服务器供移动端查看，那么宽度控制在1080px以内通常足够了。

// 在 watermarkImage 方法中，获取图片信息后
const MAX_OUTPUT_WIDTH = 1080;
let outputWidth = imageInfo.width;
let outputHeight = imageInfo.height;

if (outputWidth > MAX_OUTPUT_WIDTH) {
  const scale = MAX_OUTPUT_WIDTH / outputWidth;
  outputWidth = MAX_OUTPUT_WIDTH;
  outputHeight = Math.round(outputHeight * scale);
}
// 然后在 canvasToTempFilePath 时使用 destWidth, destHeight 参数进行缩放导出

2. 字体加载与回退： 在Canvas中指定了特殊字体（如"PingFang SC"），但用户设备上可能没有。这会导致字体回退到默认字体，可能影响水印的视觉设计和文本宽度计算（导致换行错位）。

• 解决方案：
  • 使用安全字体栈：font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif。
  • 动态测量：如果对排版要求极高，可以在绘制前用ctx.measureText测试关键字符串在目标字体下的实际宽度，如果发现与预期偏差过大（说明字体可能未加载），则动态调整布局或使用备用字体。
  • 预加载字体：在UniApp中，可以将字体文件放入static目录，并使用uni.loadFontFace API进行加载，但这会增加包体积和复杂度。

3. Android机型兼容性： 部分Android机型上，live-pusher的snapshot方法可能返回的图片方向不正确（横屏拍摄时），或者Canvas的绘制在低端机上较慢。

• 方向处理：快照图片的orientation信息可以在uni.getImageInfo的成功回调中获得。如果发现方向值不是1（默认），可能需要先使用Canvas的rotate和translate进行旋转校正，然后再绘制水印。这是一个相对复杂的主题，需要结合EXIF信息处理。
• 操作反馈：在低端机上，从拍照到生成水印图片可能需要1-2秒。务必提供明确的等待提示（如uni.showLoading），并在操作结束后关闭。

4. 权限与真机调试： 这是最容易“踩坑”的地方。

• 必须配置的权限：在manifest.json的“App模块权限配置”中，务必勾选“LivePusher(直播推流)”。否则，在打包后live-pusher组件根本无法使用。
• 相机权限：Android的相机权限是运行时申请的。如果打开页面后黑屏，首先检查是否已授权。可以在onLoad中调用uni.authorize提前申请。
• 真机调试基座：开发时，务必使用“标准基座”运行，而不是“自定义基座”，除非你确定自定义基座包含了所有必要的原生模块。很多相机权限问题在标准基座上更容易复现和排查。

下表总结了关键步骤的检查点：

步骤	可能的问题	排查与解决方案
页面打开黑屏	1. live-pusher模块未勾选 2. 相机权限未授权 3. 使用了不支持的自定义基座	1. 检查manifest.json配置 2. 调用uni.authorize申请权限 3. 改用HBuilderX标准基座运行
拍照后无反应	1. snapshot成功回调未执行 2. 页面通信失败	1. 检查live-pusher的snapshot API兼容性 2. 确认getCurrentPages()能正确获取上一页实例
生成的水印图片模糊	Canvas导出尺寸小于原图尺寸	检查canvasToTempFilePath的destWidth和destHeight参数，确保其值合理
水印位置错乱	1. 坐标计算错误 2. 图片存在EXIF旋转信息	1. 使用console.log调试坐标值 2. 获取图片的orientation并进行校正
多行文本中间被切断	换行算法在单词/汉字中间断开	优化drawWrappedText函数，对于英文可以按空格分词，对于中文按字符处理

5. 更优雅的文本换行算法进阶： 之前提供的drawWrappedText函数是一个基础版本。对于中英文混合、标点符号避头尾等更专业的排版需求，算法需要进一步优化。例如，我们可以引入一个“分词器”来更好地处理英文单词：

// 改进版：优先在空格处换行
drawWrappedTextAdvanced(ctx, text, x, y, maxWidth, lineHeight, maxLines) {
  ctx.textBaseline = 'top';
  const paragraphs = text.split('\n');
  let currentLine = 0;
  let drawY = y;

  for (const para of paragraphs) {
    const words = para.split(' ');
    let currentLineText = '';

    for (let i = 0; i < words.length; i++) {
      const testLine = currentLineText ? `${currentLineText} ${words[i]}` : words[i];
      const testWidth = ctx.measureText(testLine).width;

      if (testWidth > maxWidth && i > 0) {
        // 绘制当前行
        ctx.fillText(currentLineText, x, drawY);
        drawY += lineHeight;
        currentLine++;
        if (currentLine >= maxLines) {
          // 添加省略号并返回
          const ellipsisWidth = ctx.measureText('...').width;
          while (ctx.measureText(currentLineText + '...').width > maxWidth && currentLineText.length > 0) {
            currentLineText = currentLineText.substring(0, currentLineText.length - 1);
          }
          ctx.fillText(currentLineText + '...', x, drawY - lineHeight);
          return drawY;
        }
        currentLineText = words[i];
      } else {
        currentLineText = testLine;
      }
    }
    // 绘制段落最后一行
    if (currentLineText) {
      ctx.fillText(currentLineText, x, drawY);
      drawY += lineHeight;
      currentLine++;
      if (currentLine >= maxLines) return drawY;
    }
    // 段落间可加空行
    // drawY += lineHeight * 0.5;
  }
  return drawY;
}

这个版本优先在空格处换行，使英文文本的排版更加美观。对于纯中文文本，按字符拆分（split('')）的方式通常已经足够。

6. 扩展思路：从水印到自定义相机生态

掌握了动态多行文本水印的核心技术后，你的自定义相机可以进一步扩展，形成一个功能丰富的拍摄工具集：

• 模板化水印：预定义多种水印模板（如“工程巡检”、“客户签约”、“库存盘点”），用户拍摄时一键选择。每个模板对应一套预配置的watermarkConfig，包括固定的文字、Logo和布局。
• 可视化水印编辑器：允许用户在拍摄前或拍摄后，在预览图上直接拖拽、旋转、缩放水印文字或图标，并实时看到效果。这需要更复杂的Canvas交互逻辑。
• 多图层混合与滤镜：除了文字，还可以在Canvas上绘制半透明色块、渐变背景作为水印衬底，或者对原图应用简单的滤镜（灰度、怀旧）后再添加水印。
• 与UniCloud结合：将拍摄完成的水印图片直接上传到UniCloud云存储，并关联相应的业务数据（订单号、巡检ID），实现端到端的数据闭环。

实现这些高级功能，其基石依然是本文详细剖析的live-pusher捕获画面、Canvas合成图像这一核心技术路径。当你透彻理解了这两个核心组件如何协同工作，并解决了多行文本绘制、性能、兼容性等深层问题后，任何关于自定义相机的创意想法，都将拥有坚实可靠的实现基础。