精灵图生成器

admin

http://seer520.com/bbs/plugin.php?id=seer_jltpscq:seer_jltpscq


功能说明

这个精灵图制作器实现了以下功能：

• 多图上传：支持点击上传或拖拽上传多张图片
• 图片管理：
  
  
  • 拖拽排序图标顺序
  • 删除或替换指定图片
  • 为每个图标设置CSS类名
    
    
• 尺寸调整：
  
  
  • 单个图标可分别设置宽高
  • 批量统一尺寸功能，可选择保持原始宽高比
    
    
• 布局模式：
  
  
  • 横向排列
  • 纵向排列
  • 网格排列（可设置列数）
    
    
• 间距控制：
  
  
  • 图标间距设置
  • 整体外边距设置
    
    
• 实时预览：Canvas实时渲染精灵图效果
• 导出功能：
  
  
  • 下载精灵图PNG文件
  • 复制生成的CSS代码
    
    
  
  

使用方法

• 点击上传区域或拖拽图片到上传区域
• 在图标列表中调整图片顺序、设置类名和尺寸
• 在布局设置中选择排列方式和间距
• 点击"生成精灵图"按钮
• 在预览区查看效果，复制CSS代码或下载精灵图
  
  

这个工具完全在前端实现，无需服务器支持，所有处理都在浏览器中完成。