随便一句话写一个网页小工具

SOLO挑战赛专区
1

image
image1112×865 31.4 KB

文件转换

一个美观、高效的文件格式转换工具，支持多种文件类型的转换和视频压缩功能。

功能特性

  • :page_facing_up: 文件转换：支持 PDF、TXT、DOCX、XLSX、CSV、HTML、Markdown、ZIP 等格式
  • :framed_picture: 图片转换：支持 JPG、PNG、WebP、GIF、BMP、SVG、ICO、TIFF 等格式
  • :musical_note: 音频转换：支持 MP3、WAV、OGG、M4A、FLAC、AAC、WMA、Opus 等格式
  • :clapper_board: 视频压缩：支持视频文件的压缩，提供无损/高质量/中等/低质量四种压缩级别
  • :artist_palette: 美观界面：白色与浅蓝色清新配色，立体卡片设计，流畅动画效果
  • :locked: 隐私安全：所有转换在浏览器本地完成，数据不上传
  • :high_voltage: 快速转换：无需等待服务器处理
  • :mobile_phone: 移动端支持：完美适配各种屏幕尺寸
  • :magnifying_glass_tilted_left: 文件类型自动识别：上传文件时自动识别文件类型，标记支持或不支持的转换格式

快速开始

1. 克隆或下载项目

git clone <your-repo-url>
cd <repo-name>

2. 本地预览

直接用浏览器打开 index.html 即可使用。

部署到 GitHub Pages

方法一：通过 GitHub 网页界面部署

  1. 在 GitHub 上创建一个新仓库
  2. 上传所有文件（index.html、style.css、script.js、README.md）
  3. 进入仓库的 Settings 页面
  4. 滚动到 Pages 部分
  5. 在 Build and deployment 下，选择 Deploy from a branch
  6. 选择 main 分支（或 master 分支）
  7. 点击 Save
  8. 等待几分钟，您的网站就会部署在 https://<your-username>.github.io/<repo-name>/

方法二：通过命令行部署

# 1. 初始化 Git 仓库
git init

# 2. 添加文件
git add .

# 3. 提交更改
git commit -m "Initial commit"

# 4. 连接到 GitHub 仓库
git remote add origin https://github.com/<your-username>/<repo-name>.git

# 5. 推送到 main 分支
git branch -M main
git push -u origin main

# 6. 然后在 GitHub Settings > Pages 中启用 GitHub Pages

使用说明

文件转换

  1. 点击"文件转换"标签
  2. 点击或拖拽文件到上传区域
  3. 系统自动识别文件类型，标记支持或不支持的格式
  4. 选择目标格式
  5. 点击"转换文件"按钮
  6. 转换完成后，点击"下载"获取文件

图片转换

  1. 点击"图片转换"标签
  2. 点击或拖拽图片到上传区域
  3. 系统自动识别图片类型，标记支持或不支持的格式
  4. 选择目标格式和质量
  5. 点击"转换图片"按钮
  6. 转换完成后，点击"下载"获取图片

音频转换

  1. 点击"音频转换"标签
  2. 点击或拖拽音频到上传区域
  3. 系统自动识别音频类型，标记支持或不支持的格式
  4. 选择目标格式和比特率
  5. 点击"转换音频"按钮
  6. 转换完成后，点击"下载"获取音频

视频压缩

  1. 点击"视频压缩"标签
  2. 点击或拖拽视频到上传区域
  3. 系统自动识别视频类型，标记支持或不支持的格式
  4. 选择压缩级别（无损/高质量/中等/低质量）
  5. 点击"压缩视频"按钮
  6. 压缩完成后，点击"下载"获取压缩后的视频

支持的格式

图片格式

  • JPG/JPEG
  • PNG
  • WebP
  • GIF
  • BMP
  • SVG
  • ICO
  • TIFF

音频格式

  • MP3
  • WAV
  • OGG
  • M4A
  • FLAC
  • AAC
  • WMA
  • Opus

文件格式

  • PDF
  • TXT
  • DOCX
  • XLSX
  • CSV
  • HTML
  • Markdown
  • ZIP

视频压缩

  • 支持常见视频格式（MP4、WebM、MOV、AVI、MKV、WMV、FLV、M4V）
  • 输出格式：WebM

技术说明

  • 图片转换：使用 HTML5 Canvas API 实现，转换质量高
  • 音频/文件转换：当前为基础实现，复杂格式转换需要后端服务或 FFmpeg 支持
  • 视频压缩：使用 MediaRecorder 和 Canvas API，纯前端实现
  • 文件类型识别：基于文件扩展名和 MIME 类型的双重识别
  • 纯前端实现：无需后端服务器，部署简单

浏览器兼容性

  • Chrome 60+
  • Firefox 55+
  • Safari 12+
  • Edge 79+

注意：视频压缩功能需要浏览器支持 MediaRecorder API（建议使用 Chrome 或 Edge）。

开发建议

如果需要增强音频和复杂文件转换功能，可以考虑：

  1. 集成 FFmpeg.wasm 库
  2. 连接后端转换服务
  3. 添加更多格式支持