跳到主要内容
忆云竹

雪碧图生成

多图排列 · 间距设置 · CSS 与坐标

图片不上传

文件

0 · 0 个已选

尚未选择图片。

拖入图片或 ZIP 压缩包 也可粘贴图片,或一次选择多张。
JPEG · PNG · WEBP · AVIF

处理设置

高级设置
导出设置
证件照构图本地检测只生成建议,导出前仍可手动调整。

当前图片尚未确认构图。

证件照背景可选的本地人像抠图,原图不会上传。
处理范围
输出格式
图片尺寸
预设尺寸按平台常用规格输出

可同时选择多个规格,每张图片会分别生成对应结果。

图标安全留白12%
图标背景

同一构图会生成 Favicon、PWA 和常用应用尺寸,并附带 manifest。

裁剪区域拖动选框调整位置与大小
旋转
质量88%
图片尺寸
图片位置
四边留白px
背景色
切分方式
排列方式
对齐方式
高级设置
亮度直方图
水印图片

位置

高级设置
抠图模式
AI 图片 2 倍放大Real-ESRGAN · 2×

从图片中取色

对齐方式
元数据任务
扫描效果

将四个角点拖到文档边缘;需要微调时可使用方向键。

质量
帧范围末帧留空表示处理到结尾。

Base64 会增大数据体积;为保护浏览器内存,本工具限制输入大小。

选择下一步操作

图片只会通过当前浏览器临时传递,不会上传到服务器。

继续处理的图片
批量图片处理自选处理步骤 · 批量导出 图片裁剪比例裁剪 · 旋转校正 · 逐图构图 图片切割宫格切图 · 长图分段 · 自定参考线 图片拼接横向拼接 · 纵向长图 · 宫格排版 修改图片尺寸像素与比例 · 多种适配 · 多规格导出 扩展图片画布扩展边距 · 自定画布 · 透明或纯色背景 社交媒体图片尺寸转换常用平台尺寸 · 构图参考 · 多规格导出 图片压缩智能压缩 · 指定体积 · 原图对比 图片格式转换选择图片即转换 · 多格式输出 · 批量下载 图片与 Base64 转换图片与 Base64 互转 · 即时预览 · 一键复制 图片编辑旋转翻转 · 色彩调整 · 撤销重做 图片加水印文字或图片水印 · 拖动定位 · 平铺 人脸与隐私信息遮挡人脸检测 · 手动框选 · 多图批量处理 图片调色曝光与色彩 · 直方图 · 实时预览 图片取色与主色提取点击取色 · HEX / RGB / HSL · 图片色板 图片颜色替换点击选色 · 容差与羽化 · 实时替换 图片对比滑动对比 · 并排查看 · 像素差异 查看与删除图片元数据图片信息 · 隐私检查 · 清除元数据 查找重复图片文件夹导入 · 完全重复 · 视觉相似 多图生成 GIF多图合成动图 · 逐帧时长 · 顺序调整 GIF 拆帧帧范围 · 按间隔提取 · 批量下载 GIF 动画编辑帧序与时长 · 倒放变速 · 裁剪缩放 GIF 压缩颜色精简 · 抽帧缩放 · 体积优化 GIF 转雪碧图动图拆帧 · 宫格排布 · 坐标文件 图片转 PDF图片排序 · 页面规格 · 合并 PDF Favicon 与应用图标生成网站与应用图标 · 安全留白 · 多尺寸输出 图片占位符生成BlurHash · ThumbHash · 小图占位 本地图片抠图人像或通用抠图 · 边缘调整 · 更换背景 图片文字识别(OCR)文字识别 · 区域选择 · 文本导出 文档照片扫描与增强四角校正 · 文档增强 · 多页 PDF AI 图片 2 倍放大本地 AI 放大 · 两倍尺寸 · 细节增强 证件照制作规格选择 · 构图调整 · 背景处理 中国护照照片处理规格选择 · 构图调整 · 背景处理 中国居民身份证照片处理规格选择 · 构图调整 · 背景处理 教师资格考试报名照片处理规格选择 · 构图调整 · 背景处理 公务员考试报名照片处理规格选择 · 构图调整 · 背景处理 湖北社保卡照片处理规格选择 · 构图调整 · 背景处理 美国签证照片处理规格选择 · 构图调整 · 背景处理 日本签证照片处理规格选择 · 构图调整 · 背景处理

工具介绍

把一组图标或游戏小素材放进同一张图后,可通过坐标读取指定区域。此工具采用规则网格,保持素材尺寸,空白多少取决于最大的那张图。

使用说明

雪碧图生成

适合处理什么

把多张小图按列数和间距打包成雪碧图,同时生成 JSON 坐标和 CSS 背景定位,适合图标与游戏素材。

使用方法

排列图片后设置列数和间距。各图保持原像素尺寸,放在按最大宽高确定的格子左上角;导出合成图、JSON 坐标与 CSS 定位。

结果与继续处理

除主图片外还会生成坐标、清单或辅助代码等配套文件,下载全部 ZIP 可保持这些文件之间的对应关系。

隐私与本地处理

处理过程在浏览器本地运行,本工具不会上传源图片。

常见问题

不同大小的素材会被拉伸到同样大小吗?

不会。各图保留原尺寸,放在按最大宽高确定的格子左上角,所以可能有空白。导出PNG、JSON坐标和CSS定位;这不是自动去透明边的紧密装箱算法。

导出的 CSS 为什么还不能直接显示图集?

CSS 提供每个小图的尺寸和背景位置,还需在页面中设置图集的 background-image 路径及合适的元素显示方式。PNG、JSON 和 CSS 要使用同一次导出的版本,修改列数或间距后应一起替换。

怎样固定素材顺序,避免重新导出后坐标错位?

先在队列中确定排列顺序,再设置列数和间距。每个位置按当前顺序编号,增删或移动图片都会影响后面的坐标;不要把旧映射文件配到新图集上。

评论

0
后参与评论。
暂无评论
回复讨论

按时间查看完整回复脉络;每条回复都会标明它回应的具体内容。