1
0
Files
PPTX/openspec/changes/archive/2026-03-04-remove-image-fit-modes/specs/html-rendering/spec.md
lanyuanxiaoyao f34405be36 feat: 移除图片适配模式功能
移除图片 fit 和 background 参数支持,简化图片渲染逻辑。系统恢复到直接使用 python-pptx 原生图片添加功能,图片将被拉伸到指定尺寸。

变更内容:
- 移除 ImageElement 的 fit 和 background 字段
- 移除 metadata.dpi 配置
- 删除 utils/image_utils.py 图片处理工具模块
- 删除 validators/image_config.py 验证器
- 简化 PPTX 和 HTML 渲染器的图片处理逻辑
- HTML 渲染器使用硬编码 DPI=96(Web 标准)
- 删除相关测试文件(单元测试、集成测试、e2e 测试)
- 更新规格文档和用户文档
- 保留 Pillow 依赖用于未来可能的图片处理需求

影响:
- 删除 11 个文件
- 修改 10 个文件
- 净减少 1558 行代码
- 所有 402 个测试通过

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
2026-03-04 14:23:12 +08:00

2.8 KiB
Raw Blame History

HTML Rendering Delta Spec

REMOVED Requirements

Requirement: 系统必须渲染图片元素 (部分移除)

Reason: 移除图片适配模式功能fit 和 background 参数),简化 HTML 图片渲染

Migration: 移除图片元素的 fitbackground 参数定义HTML 渲染器将输出简单的 <img> 标签

Scenario: 使用 fit 模式渲染图片

REMOVED

  • 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 映射

REMOVED

  • 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: noneobject-position: center

Scenario: 使用背景色渲染图片

REMOVED

  • 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: 图片容器支持背景色

REMOVED

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

Scenario: 使用 DPI 配置渲染图片

REMOVED

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

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

REMOVED

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

MODIFIED Requirements

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

系统 SHALL 将 YAML 中的图片元素转换为 HTML <img> 标签,使用固定 DPI 进行尺寸转换。

Scenario: 渲染本地图片

  • WHEN 元素定义为 {type: image, src: "images/logo.png", box: [2, 3, 4, 3]}
  • THEN 系统生成 <img> 标签src 为图片的文件路径,位置为 (192px, 288px),尺寸为 384x288 像素

Scenario: 处理相对路径

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

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

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