Discuz! 精灵图制作器精灵图制作器1.0.1(juui_sprrite)_Discuz! 插件

5.0 ★★★★★ ★★★★★

产品评分

1 条评分

暂无

服务评分

免费应用不支持服务评分

5.0星 1

4.0星 0

3.0星 0

2.0星 0

1.0星 0

全部评价1 无法识别您的站点信息，请从网站后台进入应用中心

请从站点后台进入应用中心后查看评价

**🎨 精灵图制作器（juui_sprrite）**

支持 Discuz! X3.4 / X3.5 前端 CSS 精灵图生成，支持本地选择多张小图大图，在线拼合为一张精灵图（Sprite PNG），并自动生成对应的 CSS 代码。纯前端实现，无数据表、无写库，无需服务器端图像处理，绿色安装/卸载。

**功能特性**
- 多图上传：一次选择多张图片（支持任意常见图片格式）
- 拖拽排序：在列表中自由拖拽调整图标顺序
- 删除/替换：任意删除已选图片，或替换指定图片
- 尺寸调整：
- 单个图标可分别设置宽/高
- 一键“统一尺寸”，可选择保持原始宽高比
- 布局模式：
- 横向排列
- 纵向排列
- 网格排列
- 间距与外边距：可设置图标间距与整体外边距
- 即时预览：Canvas 实时渲染拼合效果
- 一键导出：
- 下载精灵图 PNG
- 复制生成的 CSS 代码
- 自定义类名：每个图标可指定生成的 CSS 类名

**使用方法**
1. 安装并启用插件后，访问前台入口：
   - 导航“精灵图工具”
   - 插件链接：`plugin.php?id=juui_sprrite:index`

2. 点击“选择图片”，批量选择需要合并的小图标。
3. 在“图标列表”中：
   - 可拖拽调整顺序
   - 为每个图标设置类名与尺寸
   - 删除/替换指定图标
4. 在“布局设置”中按需选择排列方式、列数（网格）、间距与外边距。
5. 如需统一尺寸，可展开“统一调整所有图标尺寸”进行设置并应用。
6. 点击“生成精灵图”，在下方：
   - 预览区展示拼合后的精灵图
   - “CSS 代码”区域显示对应样式，点击“复制 CSS”复制到剪贴板
   - 点击“下载精灵图 (PNG)”保存图片文件

**生成精灵图结果说明**
- PNG 文件：浏览器端 Canvas 直接导出拼合后的图像。
- CSS 代码：包含基础 `.sprite` 背景规则以及每个图标的尺寸与 background-position。
- 注意：生成的 CSS 中基础选择器背景图 URL 默认为 `sprite.png`，而下载下来的文件名为 `sprite-sheet.png`。请在使用时二选一：
 - 将下载文件重命名为 `sprite.png`；或
 - 手动修改 CSS 中的 `background-image` 路径与文件名以匹配实际文件。

💖💖💖💖💖**本插件非常适合PC端站点的使用，可把过多的零碎小图转为一张sprite图加载一次性加载，避免过多小图的请求**💖💖💖💖💖

# 更多插件查看：https://addon.dismall.com/developer-101675.html

应用截图3 张点击图片可查看大图

[b]🎨 精灵图制作器（juui_sprrite）[/b]

支持 Discuz! X3.4 / X3.5 前端 CSS 精灵图生成，支持本地选择多张小图大图，在线拼合为一张精灵图（Sprite PNG），并自动生成对应的 CSS 代码。纯前端实现，无数据表、无写库，无需服务器端图像处理，绿色安装/卸载。

[b]功能特性[/b]
- 多图上传：一次选择多张图片（支持任意常见图片格式）
- 拖拽排序：在列表中自由拖拽调整图标顺序
- 删除/替换：任意删除已选图片，或替换指定图片
- 尺寸调整：
- 单个图标可分别设置宽/高
- 一键“统一尺寸”，可选择保持原始宽高比
- 布局模式：
- 横向排列
- 纵向排列
- 网格排列
- 间距与外边距：可设置图标间距与整体外边距
- 即时预览：Canvas 实时渲染拼合效果
- 一键导出：
- 下载精灵图 PNG
- 复制生成的 CSS 代码
- 自定义类名：每个图标可指定生成的 CSS 类名

[b]使用方法[/b]
1. 安装并启用插件后，访问前台入口：
   - 导航“精灵图工具”
   - 插件链接：`plugin.php?id=juui_sprrite:index`

2. 点击“选择图片”，批量选择需要合并的小图标。
3. 在“图标列表”中：
   - 可拖拽调整顺序
   - 为每个图标设置类名与尺寸
   - 删除/替换指定图标
4. 在“布局设置”中按需选择排列方式、列数（网格）、间距与外边距。
5. 如需统一尺寸，可展开“统一调整所有图标尺寸”进行设置并应用。
6. 点击“生成精灵图”，在下方：
   - 预览区展示拼合后的精灵图
   - “CSS 代码”区域显示对应样式，点击“复制 CSS”复制到剪贴板
   - 点击“下载精灵图 (PNG)”保存图片文件

[b]生成精灵图结果说明[/b]
- PNG 文件：浏览器端 Canvas 直接导出拼合后的图像。
- CSS 代码：包含基础 `.sprite` 背景规则以及每个图标的尺寸与 background-position。
- 注意：生成的 CSS 中基础选择器背景图 URL 默认为 `sprite.png`，而下载下来的文件名为 `sprite-sheet.png`。请在使用时二选一：
 - 将下载文件重命名为 `sprite.png`；或
 - 手动修改 CSS 中的 `background-image` 路径与文件名以匹配实际文件。

💖💖💖💖💖[b]本插件非常适合PC端站点的使用，可把过多的零碎小图转为一张sprite图加载一次性加载，避免过多小图的请求[/b]💖💖💖💖💖

版本截图3 张点击图片可查看大图

当前版本
精灵图制作器1.0.1
更新上传支持拖拽多图上传
2025-09-17 20:44
精灵图制作器1.0.1

修复部分站点在使用第三方模板时，插件出现的布局异常超出视界(没有问题的站点可以选择不更新)
2025-09-14 14:32
精灵图制作器1.0.0

更多历史版本信息