Skip to content

clddup/img-compressor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 

Repository files navigation

智能图片压缩工具

一个基于 Web 的图片压缩工具,允许用户指定目标文件大小,并自动调整图片质量和尺寸以达到最佳压缩效果。该工具拥有炫酷的霓虹科技感界面,提供流畅的用户体验。

✨ 特性

  • 目标大小压缩: 用户可以设定图片压缩后的目标文件大小(KB)。
  • 智能质量调整: 工具会自动寻找最佳的图片质量和尺寸组合,以满足目标大小要求。
  • 实时预览: 上传图片后,可在界面上预览图片。
  • 霓虹科技感界面:
    • 动态粒子背景: 炫酷的霓虹粒子动画作为背景,营造未来感。
    • 鼠标跟随光晕: 鼠标移动时伴随柔和的紫色光晕效果。
    • 科技感按钮: 按钮设计独特,带有发光效果和交互动画。
    • 渐变文本: 标题和描述文字采用霓虹渐变色,增强视觉冲击力。
    • 自定义鼠标样式: 独特的科技感鼠标指针。

🚀 如何使用

  1. 下载: 将 index.html 文件下载到您的本地计算机。
  2. 打开: 使用任何现代浏览器(如 Chrome, Firefox, Edge)直接打开 index.html 文件。
  3. 选择图片: 点击“选择图片”按钮,上传您想要压缩的图片。
  4. 设定目标大小: 在输入框中输入您希望图片压缩到的目标大小(单位:KB)。
  5. 压缩并导出: 点击“压缩并导出”按钮,工具将自动处理并下载压缩后的图片。

🛠️ 技术栈

  • HTML5: 页面结构。
  • CSS3: 负责所有炫酷的视觉效果,包括:
    • linear-gradient@keyframes 实现动态背景。
    • box-shadowfilter: blur() 实现光晕和霓虹效果。
    • background-clip: text-webkit-text-fill-color 实现渐变文本。
    • 自定义 cursor 样式。
  • JavaScript:
    • 图片压缩逻辑(Canvas API)。
    • 鼠标跟随光晕效果。
    • 背景粒子动画。

🎨 自定义

您可以轻松修改 index.html 文件中的 <style> 标签内的 CSS 代码,以及 <script> 标签内的 JavaScript 代码,来调整界面的颜色、动画速度或任何其他视觉元素。

🤝 贡献

欢迎任何形式的贡献!如果您有改进建议或发现 Bug,请随时提交 Issue 或 Pull Request。

📄 许可证

本项目采用 MIT 许可证。详情请查看文件头部。

About

前端canvas图片压缩

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages