封面生成与文字叠加功能 - 数字先锋API文档

## 封面生成与文字叠加功能接入说明（开发参考）

### 一、功能目标

接入后，开发者可以把一张原始图片作为封面，并在底部叠加短标题文字，生成可直接展示或保存的新封面图。

典型场景：
- 内容发布前自动生成封面
- 视频/图文标题图统一样式
- 活动海报的标题叠加

![](/uploads/editor/20260413/img_69dbdccdda82c9.15546420.png)

---

### 二、整体接入流程（推荐）

1. 准备原始图片（URL 或本地上传后地址）
2. 输入/生成短标题文案
3. 调用封面处理能力进行“图片 + 文字”合成
4. 获取合成结果（URL/Base64）
5. 在前端预览，并用于发布/保存

---

### 三、前端实现参考

你当前的核心逻辑已经是可用的。前端只需在以下节点接入：

#### 1）用户输入
- 图片来源：上传、素材库选择、网络地址
- 标题输入：建议限制长度（如 12~20 字）

#### 2）调用处理函数
- 入参：`imageUrl`、`title`
- 出参：处理后的图片数据（可预览/下载/上传）

#### 3）结果处理
- 预览图展示
- 若用于发布，建议再上传到对象存储，拿到稳定 URL

---

### 四、开发实现建议（关键点）

#### 1）文字位置统一
- 水平居中：`textAlign = center`
- 建议放在底部遮罩条中间，避免压住主体内容

#### 2）可读性优化
- 底部半透明黑条（如 35% 透明）
- 白字 + 轻微阴影/描边，适配亮色背景

#### 3）标题长度控制
- 超长时建议：
  - 自动缩小字号，或
  - 截断并加省略号
- 避免换行导致版面不稳定（除非你明确支持多行）

#### 4）尺寸与清晰度
- 生成尺寸建议不低于 720px 宽
- 导出 PNG 可保证文字清晰；若考虑体积可转 JPEG/WebP

## 参考代码
```bash
// 新增：封面短标题叠字
function drawTextOnImage(url, text) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => {
      const canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      const ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0);

const pad = Math.round(canvas.width * 0.05);
      const fontSize = Math.max(28, Math.round(canvas.width * 0.045));
      const barH = Math.round(fontSize * 1.9);
      const yTop = canvas.height - pad - barH;

// 底部半透明条
      ctx.fillStyle = "rgba(0,0,0,0.35)";
      ctx.fillRect(pad, yTop, canvas.width - pad * 2, barH);

// ===== 文字样式 =====
      ctx.font = `700 ${fontSize}px "Microsoft YaHei", sans-serif`;
      ctx.textBaseline = "middle";          // [改] 用 middle 更容易垂直居中
      ctx.textAlign = "center";             // [新增] 水平居中关键
      ctx.fillStyle = "#fff";
      ctx.shadowColor = "rgba(0,0,0,0.45)";
      ctx.shadowBlur = 8;

// [新增] 计算文字中心点（在黑条中间）
      const centerX = canvas.width / 2;
      const centerY = yTop + barH / 2;

// [改] 原来是 pad+20（靠左），现在改为 centerX
      ctx.fillText(text, centerX, centerY);

// 可选：描边增强可读性（建议保留）
      ctx.lineWidth = Math.max(2, Math.round(fontSize * 0.08));
      ctx.strokeStyle = "rgba(0,0,0,0.35)";
      ctx.strokeText(text, centerX, centerY);

resolve(canvas.toDataURL("image/png"));
    };
    img.onerror = reject;
    img.src = url;
  });
}
```
---

### 五、工程落地建议

#### 1）把能力封装成独立方法/模块
例如：
- `generateCoverWithTitle(imageUrl, title, options)`

这样业务侧只关心传入图片与文案，不关心画布细节。

#### 2）区分“预览图”和“发布图”
- 预览：可低分辨率，响应更快
- 发布：使用原图或高分辨率处理，保证成品质量

#### 3）异常处理
要给用户明确反馈：
- 图片加载失败
- 文案为空
- 生成超时/失败

---

### 六、给接入方的最简说明模板

> 接入方只需提供两项数据：原始图片地址与标题文本。
> 系统会自动在图片底部添加半透明背景条，并将标题居中叠加后输出新封面。
> 建议标题控制在 20 字以内，确保显示效果最佳。
> 生成结果可用于预览、发布页封面、分享图等场景。

---

上一篇：文章封面生成示例下一篇：Gemini 对话（OpenAI 兼容）