先看页面分区
- 左侧：选择平台、图片类型、尺寸、模板，并设置导出格式。
- 中间：上传产品图、赠品图，调整位置、缩放、旋转，并填写文案。
- 右侧：实时预览最终图片。预览固定显示，方便边改边看。
正常使用流程
- 选择 平台，再选择 图片类型：品牌主图、单 SKU 图或组合装图。
- 选择 尺寸 和 模板。
- 在 产品图 区域切换产品位，点击 上传图片，上传白底图或透明 PNG。
- 用缩放、X 位移、Y 位移调整产品图；也可以直接在预览中拖动产品图，滚轮调整缩放。
- 在 文案 区域填写主标题、副标题、卖点、SKU 名称等内容。
- 天猫 / 京东品牌主图可使用 智能粘贴，从表格复制一行 6 列文案后自动填入。
- 如果模板有赠品模块，可以上传赠品图，并单独调整赠品图位置、缩放和旋转。
- 确认预览效果后，选择 JPG 或 PNG，点击导出。
图片类型怎么选
- 品牌主图：品牌规范主图和平台主图模板。
- 单 SKU 图：单 SKU 卖点、参数和场景展示。
- 组合装图：套装、多产品组合和组合 SKU 模板。
- 三类商品图只拆模板分类，上传、拖拽、缩放、文案、字体和导出能力继续共用。
产品图和赠品图
- 产品 tab 的绿色对号表示已上传图片，红色叉号表示缺图片。
- 点击预览里的产品或赠品模块，会自动切换到对应产品位。
- 普通产品图支持缩放、X 位移、Y 位移。
- 赠品模块支持整体移动和画框大小调整。
- 赠品图本身支持单独调整 赠品图 X、赠品图 Y、缩放 和 旋转角度。
- 赠品图也可以在预览中直接拖动；拖赠品图本身只移动赠品图，拖模块其他位置移动整个赠品模块。
- 预览里的红色框只表示当前正在编辑的位置，导出图片时会自动隐藏。
文案怎么改
- 文案区默认只显示 文案位 和 内容，普通使用只需要改内容。
- 需要精修时，点击文案行、输入框或预览图里的文案，在右侧当前对象区调整内容、字号、字重和颜色。
- 字号支持两位小数，例如
91.86。
- 字重按 Photoshop 常见命名显示，例如 Medium、Demibold、Semibold、Bold、Heavy。
- 主标题、副标题、卖点 1/2/3 不会被固定框裁切；文案过长会继续单行显示，由用户自己判断是否需要缩短或调小字号。
- 赠品模块两行文案默认左对齐，文案较长时会向右扩展模块，不裁切文字。
- 天猫 / 京东品牌主图
1:1 和 3:4 会同步主标题、副标题、卖点 1/2/3 的文字内容。
- 文字内容会同步，但字号、字重、颜色不会同步；每个模板可以单独调整样式。
3:4 的标题第二行是独立字段，不会强行同步到 1:1。
预览右键快捷操作
- 在预览图中右键产品图、文案、参数卡、Logo、徽章或其他可选模块，会显示当前对象可用的显隐、复原、投影和清空操作。
- 所有可切换模块集中在 模块显隐 二级菜单；刚通过右键显示或隐藏的模块，会在下一次右键时直接提供反向操作。
- 键盘用户可先选中对象，再按
Shift + F10 打开同一菜单；方向键可在菜单项之间移动。
- 校准模式下保留浏览器原生右键菜单；右键菜单和辅助命中层不会进入导出图片。
智能粘贴
- 适用于天猫 / 京东品牌规范主图。
- 复制顺序为：主标题、副标题、标题第二行、卖点1、卖点2、卖点3。
- 可以直接复制表格的一行，也可以带表头复制。
- 识别成功后会填入同平台的
1:1 和 3:4 主图文案。
怎么导出
JPG：默认推荐，适合电商平台上传。PNG：画质更稳定，但文件通常更大。- JPG 质量：高质量更清晰，文件更大；小文件会优先压体积。
- 期望最大 MB：仅 JPG 生效。工具会尝试自动降低 JPG 质量，让图片接近目标大小。
- 导出前会检查缺失产品图。如果还有红色叉号，会弹窗提醒，可以选择继续导出或返回补图。
- 参考图叠加、校准边框、产品位红框都不会进入导出图。
维护人员：模板调试
- 普通使用不需要打开这个区域。
- 参考图叠加可用于对比最终效果，支持透明度、预设和闪烁对比，导出时自动隐藏。
- 校准模式下，点击文案或产品槽位后可用方向键微调位置，按住
Shift 每次移动 10px。
- 点击 复制配置 会复制当前模板的
fixedElements、copyFields 和 slots 草稿。
常见问题
- 打不开或导出失败：确认整个
电商视觉生成器 文件夹都在，不要只复制单个 index.html；如果是维护人员单独调试内部模块，再确认 组合图主图生成器 文件夹完整。
- 导出按钮没反应：优先换 Chrome 或 Edge 打开。
- 字体看起来不对：确认
电商视觉生成器/组合图主图生成器/fonts/misans/ 或内部模块 fonts/misans/ 文件夹没有丢失。
- 图片缺失：看产品 tab 是否还有红色叉号。
- 文案太长：页面不会替你判断好不好看，需要手动缩短文案或在左侧调小字号。
页面从离线包或线上地址打开时，上传的产品图都只在当前浏览器本地处理，不会上传到服务器。
v0.5 · 平台更新中心与商品图入口融合
更新时间：2026-06-12
更新重点
- 新增平台级版本更新弹窗，新版本首次进入会自动提示。
- 新增更新记录入口，可随时查看历史版本和详细说明。
- 平台入口合并为 商品图生成器，内部按平台和图片类型选择模板。
- 图片类型统一为 品牌主图、单 SKU 图、组合装图。
- 版本发布规则写入项目规范，公开版本号保持连续。
展开更新细节
- 把版本提醒从商品图模块提升到平台层，覆盖整个电商视觉生成器。
- 用户关闭弹窗后，同一版本不会反复打扰；下一版本更新时再提示。
- 默认进入天猫 品牌主图，切换图片类型时只更换模板列表，底层编辑器继续共用。
- 旧的
?mode=main / ?mode=combo 链接仍可打开，并自动映射到对应图片类型。
- 平台壳不再把
combo-main 展开成两个同级入口，减少重复 iframe 和入口心智负担。
- Cloudflare Pages 继续发布完整 stable 包，包含
combo-main 和 campaign-poster。
- 线上部署前会继续跑包体积、入口加载、商品图分类和模板导出验证。
v0.4 · 统一平台包与线上加载优化
更新时间：2026-06-03
更新重点
- 对外使用入口统一为
电商视觉生成器/，后续线上部署也使用同一套平台包。
- 曾按 组合图生成器、主图生成器 做入口拆分，后续已融合为商品图生成器内的图片类型。
- 主图 / 组合图始终只拆模板分类，上传、拖拽、缩放、文案、字体和导出能力继续共用。
- 内部
组合图主图生成器/ 继续作为 combo-main iframe、模板验证和包生成内容保留，不再单独发给同事。
- 优化 iframe 预加载和入口切换，已加载模块切换更快。
展开更新细节
package:offline 会生成唯一对外离线包 电商视觉生成器/；Cloudflare Pages 线上版本也以这个目录作为发布内容。- zip / exe / Tauri 程序版本已退出常规交付路径，后续不再作为团队日常使用包。
- 平台入口支持按需加载模块 iframe，首屏先打开平台壳，点击模块后再加载对应工具。
- 已加载过的模块保留挂载状态，后续切换不重复初始化。
verify:online 会检查包体积、file:// 可打开性和平台模块加载链路。- 实际 Cloudflare 部署仍属于外部操作，需要单独确认后再执行。
v0.3 · 赠品模块与品牌主图联动优化
更新时间：2026-05-12
更新重点
- 天猫 / 京东品牌主图的赠品模块支持单独调整赠品图位置、缩放和旋转角度。
- 赠品模块两行文案改为严格左对齐，文案过长时模块会向右扩展，不裁切文字。
- 主标题、副标题、卖点 1/2/3 不再限制展示范围，长文案会继续单行显示。
- 单SKU-斜切场景带新增专属的卖点底条宽度滑杆，可分别调整卖点 1 / 2 的橙色底条宽度。
- 天猫 / 京东品牌主图
1:1 和 3:4 同步共享主标题、副标题和卖点 1/2/3 的文字内容。
- 文案样式不跟随同步：字号、字重、颜色仍然按每个模板独立调整。
展开更新细节
- 赠品图新增 赠品图 X、赠品图 Y 和 赠品图旋转 控制项。
- 预览中直接拖动赠品图时，只移动赠品图本身；拖动赠品模块其他区域时，移动整个赠品模块。
- 赠品模块会根据两行文案的实际宽度计算最小展示宽度，主要向右扩展。
3:4 模板的标题第二行仍是独立字段，不会强行同步到 1:1。- 长标题和长卖点不自动缩小、不自动换行、不弹溢出提醒，由使用者根据预览自行判断。
v0.2 · 模板扩展与导出体验优化
更新时间：2026-05-08
更新重点
- 新增天猫品牌规范主图
1:1 和 3:4 模板。
- 新增京东品牌规范主图
1:1 和 3:4 模板，并按新示例图更新右下角权益模块。
- 新增拼多多场景套装、双卡套装、品牌主图模板。
- 重新调整页面布局：左侧负责选择和导出，中间负责产品图和文案，右侧固定预览。
- 新增智能粘贴文案，支持天猫 / 京东品牌规范主图一行 6 列自动识别。
- 预览支持全屏查看，也支持直接点击、拖动产品图进行位置和缩放微调。
- 拼多多品牌主图 A / B、天猫品牌规范主图 1:1 / 3:4 新增参考图叠加校准，支持透明度预设、自定义透明度和闪烁对比。
- 拼多多场景套装和双卡套装增加产品图边界裁切，避免产品越过指定视觉模块。
- 导出时自动隐藏产品位红色编辑框，红框只保留在页面预览里。
展开更新细节
- 京东
1:1 / 3:4 与天猫品牌规范主图共用主要结构，但右下角权益模块使用京东专属素材。
- 智能粘贴支持从表格复制一行：主标题 / 副标题 / 标题第二行 / 卖点1 / 卖点2 / 卖点3。
- 天猫 / 京东
1:1 模板会把副标题和标题第二行拼接到同一字段；3:4 会分别填入顶部适用范围和标题第二行。
- 产品图 tab 增加绿色对号和红色叉号，能快速判断哪些位置已上传图片。
- 产品图缩放、X 位移、Y 位移增加数字输入框，方便精确微调。
- 导出区从文案区移到左侧选择区下方，产品图区域移动到文案区上方。
- 拼多多品牌主图主标题默认字号调整为
100。
- 参考图叠加仅在带有
referenceImage 的模板显示，不参与导出。
- 点击预览里的文案会激活对应输入框，点击产品图会切换到对应产品 tab。
- 模板调试和校准入口默认折叠，避免普通用户误触。
- 继续保留 JPG 质量和期望最大 MB 设置，便于控制平台上传文件体积。
v0.1 · 原型验证版
更新时间：2026-05-06 以前
更新重点
- 搭建组合装图片生成器原型，完成从模板选择到本地导出的基础流程。
- 支持天猫常用主图尺寸
1440x1440，并兼容 800x800 导出。
- 支持填写主标题、副标题、SKU 标签等基础文案。
- 支持上传产品图，并调整缩放、X 位移和 Y 位移。
- 支持导出
JPG / PNG 图片到本地。
展开更新细节
- 完成天猫 2 件、3 件、4 件组合装模板的原型结构。
- 产品图控制区改为 tab 形式，便于切换不同产品位。
- 支持复制上一张产品图的位置和缩放设置，减少重复调参。
- 新增平台选择框架，为后续拼多多、京东、抖音模板预留入口。
- 新增导出前检查、JPG 质量和期望最大 MB 设置。
- 内置 MiSans 字体，减少不同电脑打开后的字体差异。
- 新增帮助页和版本更新页，便于同事快速了解使用方式。
字体说明
本工具固定使用 MiSans 字体。MiSans 字体版权归小米所有，下载来源为官方 HyperOS 字体页面。
商品图生成器
COMMERCE STUDIO