设计元素提取
从平铺设计稿自动提取所有元素，导出透明底 PNG + 主色板分析
设计元素提取是一款免费在线图片工具。从平铺设计稿自动提取所有元素，导出透明底 PNG + 主色板分析常见相关词：提取 · element · extract · 切图 · 透明背景 · 设计稿。本页可直接使用，不必注册。
demo.png
拖放图片到页面任意位置即可替换，橙色框为检测到的元素
提取到 0 个元素
使用帮助
使用说明
- 上传一张纯色背景的平铺设计稿（元素之间留有间距）
- 工具自动识别背景色、分割每个元素、提取透明底
- 调整四个滑块微调效果：透明色差阈值、不透明色差阈值、包围盒合并间距、最小面积
- 每个元素卡片可预览、复制色板 hex、单独或批量下载 PNG
常见问题
- 什么样的图片适合？ 纯色背景（白/灰/黑等）、元素平铺排列的设计稿效果最佳
- 提取不准怎么办？ 调低「透明色差阈值」可识别更浅的元素；调高「合并间距」可合并分离的部件
- 数据安全吗？ 全部在浏览器 Canvas 本地处理，不上传任何图片
算法原理
- 背景估计：采样图像四边像素，逐通道取中位数
- 软 Alpha 反算：按与背景的色差计算透明度，反解前景真实颜色
- 连通域分割：用硬掩码（高 alpha 像素）做 BFS 连通域标记
- 包围盒合并：迭代合并相邻框 + 向外扩张收纳软阴影
- 色板聚类：对每个元素做 k-means(k=5) 提取主色
更多图片工具
查看全部关于 设计元素提取 的常见问题
设计元素提取能做什么？
设计元素提取属于图片工具。从平铺设计稿自动提取所有元素，导出透明底 PNG + 主色板分析你可以直接在本页完成操作。
谁适合使用设计元素提取？
需要处理与提取 · element · extract · 切图 · 透明背景 · 设计稿相关任务、又不想安装桌面软件的用户，可以把设计元素提取当作即开即用的网页工具。
使用设计元素提取安全吗？数据会上传吗？
该工具在浏览器本地运行。我们不会因为你使用设计元素提取而收集你输入的内容。
还有哪些同类工具？
本页底部列出了同属图片工具的相关工具，方便对比选择。