Files

lanyuanxiaoyao 19d6661381 feat: 添加图片适配模式支持

- 支持四种图片适配模式：stretch、contain、cover、center
- 支持背景色填充功能（contain 和 center 模式）
- 支持文档级 DPI 配置（metadata.dpi）
- PPTX 渲染器集成 Pillow 实现高质量图片处理
- HTML 渲染器使用 CSS object-fit 实现相同效果
- 添加完整的单元测试、集成测试和端到端测试
- 更新 README 文档和架构文档
- 模块化设计：utils/image_utils.py 图片处理工具模块
- 添加图片配置验证器：validators/image_config.py
- 向后兼容：未指定 fit 时默认使用 stretch 模式

2026-03-04 10:29:21 +08:00

3.0 KiB

Raw Blame History

HTML Rendering - Delta Spec

本 spec 是对 openspec/specs/html-rendering/spec.md 的增量修改。

MODIFIED Requirements

Requirement: 系统必须渲染图片元素

系统 SHALL 将 YAML 中的图片元素转换为 HTML <img> 标签，支持 fit 和 background 参数，使用 CSS object-fit 实现适配模式。

Scenario: 渲染本地图片

WHEN 元素定义为 {type: image, src: "images/logo.png", box: [2, 3, 4, 3]}
THEN 系统生成 <img> 标签，src 为图片的文件路径，位置为 (192px, 288px)，尺寸为 384x288 像素
AND 使用默认的 CSS 样式 object-fit: fill（等同于 stretch 模式）

Scenario: 使用 fit 模式渲染图片

WHEN 元素定义为 {type: image, src: "photo.jpg", box: [1, 1, 4, 3], fit: contain}
THEN 系统应用 CSS object-fit: contain
AND 保持图片宽高比，完整显示在 box 内

Scenario: fit 模式与 CSS object-fit 映射

WHEN fit 参数为 stretch
THEN 系统应用 CSS object-fit: fill
WHEN fit 参数为 contain
THEN 系统应用 CSS object-fit: contain
WHEN fit 参数为 cover
THEN 系统应用 CSS object-fit: cover
WHEN fit 参数为 center
THEN 系统应用 CSS object-fit: none 和 object-position: center

Scenario: 使用背景色渲染图片

WHEN 元素定义为 {type: image, src: "photo.png", box: [1, 1, 4, 3], fit: contain, background: "#f0f0f0"}
THEN 系统为图片容器添加 CSS background-color: #f0f0f0
AND 应用 CSS object-fit: contain

Scenario: 图片容器支持背景色

WHEN 图片指定了 background 参数
THEN 系统创建包装容器，应用背景色到容器
AND 图片在容器内使用 object-fit 定位

Scenario: 处理相对路径

WHEN 图片 src 使用相对路径 "assets/logo.png"
THEN 系统基于 YAML 文件所在目录解析相对路径

Scenario: 图片不存在时显示占位符

WHEN 图片文件不存在
THEN 系统显示占位符或错误提示，而不是崩溃

Scenario: 使用 DPI 配置渲染图片

WHEN metadata 定义了 dpi: 120
THEN 系统使用该 DPI 值进行英寸到像素的转换
AND box: [1, 1, 4, 3] 转换为 CSS: left: 120px; top: 120px; width: 480px; height: 360px

Scenario: HTML 渲染与 PPTX 渲染效果一致

WHEN 同一图片元素使用相同的 fit 和 background 参数
THEN HTML 预览和 PPTX 输出的视觉效果应保持一致
AND 图片位置、尺寸、适配方式相同

Requirement: 图片元素的 box 参数必须存在

系统 SHALL 要求图片元素必须包含 box 参数，否则验证失败。

Scenario: 缺少 box 参数时报错

WHEN 图片元素未定义 box 参数
THEN 系统抛出 ERROR，提示 box 参数为必需

Scenario: box 参数转换为像素

WHEN 图片元素定义了 box: [1, 2, 4, 3] 且 DPI 为 96
THEN 系统转换为 CSS：left: 96px; top: 192px; width: 384px; height: 288px

3.0 KiB Raw Blame History Unescape Escape