31 lines
1.3 KiB
Markdown
31 lines
1.3 KiB
Markdown
# Web to Pixso
|
||
|
||
一套对标 `figma-capture-extension` 使用体验的网页采集工具，包含 Chrome 扩展和 Pixso 导入插件。
|
||
|
||
## 目录
|
||
|
||
- `manifest.json`、`popup.*`、`background.js`、`capture.js`、`runner.js`：Chrome 扩展
|
||
- `pixso-plugin/`：Pixso 插件，用于导入扩展导出的 JSON 文件
|
||
- `logo/`：扩展与插件图标
|
||
|
||
## 使用
|
||
|
||
1. 打开 `chrome://extensions/`，开启开发者模式。
|
||
2. 点击“加载已解压的扩展程序”，选择本目录 `web-to-pixso`。
|
||
3. 打开要采集的网页，点击扩展图标，按需开启“跨域图片代理模式”，点击“开始采集”。
|
||
4. 扩展会下载一个 `web-to-pixso/*.json` 文件。
|
||
5. 在 Pixso 中导入 `pixso-plugin/manifest.json`，运行插件并选择上一步下载的 JSON 文件。若旧版导入器要求 `plugin.json`，目录内也保留了同内容兼容文件。
|
||
|
||
## 数据格式
|
||
|
||
扩展导出的文件格式为 `pixso-design-capture`，包含页面来源、画布尺寸、DOM 节点树、图片资源、字体和诊断信息。Pixso 插件会尽量还原：
|
||
|
||
- 文本图层
|
||
- 图片和背景图片
|
||
- 背景色、边框、圆角、透明度
|
||
- DOM 层级和基础坐标
|
||
|
||
## 注意
|
||
|
||
网页到设计稿的转换无法做到 100% 语义等价，复杂 CSS、canvas、视频帧、伪元素和部分字体效果可能需要在 Pixso 中二次微调。
|