Element Extractor
Extract all elements from tiled designs, transparent PNG + palette
Element Extractor is a free online Image tool. Extract all elements from tiled designs, transparent PNG + palette Related terms: 提取 · element · extract · 切图 · 透明背景 · 设计稿. Use it on this page without signing in.
demo.png
拖放图片到页面任意位置即可替换，橙色框为检测到的元素
提取到 0 个元素
使用说明
- 上传一张纯色背景的平铺设计稿（元素之间留有间距）
- 工具自动识别背景色、分割每个元素、提取透明底
- 调整四个滑块微调效果：透明色差阈值、不透明色差阈值、包围盒合并间距、最小面积
- 每个元素卡片可预览、复制色板 hex、单独或批量下载 PNG
常见问题
- 什么样的图片适合？ 纯色背景（白/灰/黑等）、元素平铺排列的设计稿效果最佳
- 提取不准怎么办？ 调低「透明色差阈值」可识别更浅的元素；调高「合并间距」可合并分离的部件
- 数据安全吗？ 全部在浏览器 Canvas 本地处理，不上传任何图片
算法原理
- 背景估计：采样图像四边像素，逐通道取中位数
- 软 Alpha 反算：按与背景的色差计算透明度，反解前景真实颜色
- 连通域分割：用硬掩码（高 alpha 像素）做 BFS 连通域标记
- 包围盒合并：迭代合并相邻框 + 向外扩张收纳软阴影
- 色板聚类：对每个元素做 k-means(k=5) 提取主色
More Image
View allImage Compressor
Compress JPG / PNG / WebP, custom quality and dimensions
Image Converter
Convert between JPG / PNG / WebP, HEIC to JPG
Crop Rotate Flip
Crop, rotate and flip images with custom ratios
ID Photo Background
Change ID photo background (blue/white/red), common sizes
Image Watermark
Add text watermarks with custom position, size and opacity
Nine-Grid Split
Split an image into a 3×3 grid for social posts
Image Stitch
Stitch multiple images vertically or horizontally
GIF Maker
Create GIFs from images, adjust frame rate and size
FAQ about Element Extractor
What can Element Extractor do?
Element Extractor is a Image tool. Extract all elements from tiled designs, transparent PNG + palette You can finish the job on this page.
Who should use Element Extractor?
Anyone handling 提取 · element · extract · 切图 · 透明背景 · 设计稿 who does not want to install desktop software can use Element Extractor in the browser.
Is Element Extractor safe? Is my data uploaded?
This tool runs in your browser. We do not collect the content you enter into Element Extractor just because you used it.
What similar tools exist?
Related tools in the same Image group are listed at the bottom of this page.