PSD文件无法直接导入HTML5编辑器，必须经Photopea导出为JSON+Base64 PNG，再通过JavaScript加载并手动创建DOM元素还原图层，文字属性需额外转换补全。
PSD 文件不能直接在 HTML5 编辑器里“导入”
HTML5 本身不支持解析 PSD 格式，浏览器没有内置 PSD 解析能力，任何所谓“HTML5 可视化编辑器直接导入 PSD”的说法，背后必然依赖服务端解析（如 Node.js + psd 库）或桌面预处理工具（如 Photopea、Adobe XD 导出为 JSON/SVG/HTML）。纯前端 JS 无法读取 PSD 图层结构、混合模式、智能对象等信息。
psd 库只能解析扁平化 PSD，且不支持新版格式
npm 上的 psd 库（如 ag-psd）是目前最常用的前端 PSD 解析方案，但它有明确限制：
- 仅支持 Photoshop CS6 及更早版本保存的 PSD（即未启用“最大化兼容性”的新格式）
- 不解析图层样式（阴影、描边）、矢量蒙版、3D 图层、文字图层的完整排版属性（仅返回原始文本和字体名，无字号、行高、颜色等）
- 导出为
canvas或JSON后，需自行映射图层到 DOM 元素或 SVGg节点，没有自动布局功能 - 大文件（>20MB）易触发浏览器内存溢出，建议先用 Photopea 手动导出为 PNG 序列 + 图层坐标 JSON
真正可用的“导入”流程其实是三步预处理
想让 PSD 内容出现在 HTML5 可视化编辑器中，实际要走的是：导出 → 结构化 → 加载。不是“一键导入”，而是“人工对齐”：
- 用 Photopea 打开 PSD →
File > Export As > JSON (PSD)（它会生成含图层位置、尺寸、可见性、PNG Base64 的 JSON） - 把导出的 JSON 作为配置加载进编辑器，用
fetch读取后循环创建div或img元素，并设置style.left/top/width/height/z-index - 若需编辑图层，必须额外实现拖拽定位、缩放、隐藏开关——
psd库本身不提供 UI 控件
示例片段（加载 Photopea 导出的 JSON）：
立即学习“前端免费学习笔记（深入）”；
fetch('layer-export.json')
.then(r => r.json())
.then(layers => {
layers.forEach(layer => {
const el = document.createElement('img');
el.src = layer.image; // Base64 PNG
el.style.cssText = `
position: absolute;
left: ${layer.x}px;
top: ${layer.y}px;
width: ${layer.width}px;
height: ${layer.height}px;
z-index: ${layer.zIndex};
`;
editorContainer.appendChild(el);
});
});
别忽略文字图层的渲染鸿沟
PSD 里的文字图层，在导出 JSON 后通常只保留 text 字符串和 fontFamily，但缺少：fontSize（单位可能是 pt 或 px）、lineHeight、letterSpacing、textColor（RGB 值可能被压缩成单个整数）、对齐方式（textAlign）。浏览器用 div + contenteditable 渲染时，这些必须手动补全，否则文字会失真。Photopea 导出的 JSON 中 textColor 是 0xFF0000FF 这类 ARGB 整数，需转换为 rgba(255,0,0,1) 才能生效。
