精灵图制作器精灵图制作器1.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图加载一次性加载，避免过多小图的请求💖💖💖💖💖

🎨 精灵图制作器（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图加载一次性加载，避免过多小图的请求💖💖💖💖💖

更新上传支持拖拽多图上传

修复部分站点在使用第三方模板时，插件出现的布局异常超出视界(没有问题的站点可以选择不更新)