当前位置：首页 > article >正文

优化使用 Flask 构建视频转 GIF 工具

article 2025/1/22 14:26:45

优化使用 Flask 构建视频转 GIF 工具

优化后的项目概述

在优化后的版本中，我们将实现以下功能：

可设置每个 GIF 的帧率和大小：用户可以选择 GIF 的帧率和输出大小。
改进的用户界面：使用更现代的设计使界面更美观、整洁。
自定义生成的 GIF 文件名：用户可以为每个视频设置开始时间和持续时间。

优化后的项目结构

your_project/
│
├── app_plus.py           # 优化后的 Flask 应用
├── input_videos/         # 上传视频的文件夹
├── output_gifs/          # 输出 GIF 的文件夹
└── templates/
    └── index_plus.html   # 优化后的 HTML 前端页面

Flask 应用代码 (`app_plus.py`)

	from flask import Flask, request, render_template, redirect, url_for, send_from_directory
import subprocess
import os

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = './input_videos/'
app.config['OUTPUT_FOLDER'] = './output_gifs/'

# 确保上传和输出文件夹存在
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
os.makedirs(app.config['OUTPUT_FOLDER'], exist_ok=True)

def convert_video_to_gif(input_video_path, output_gif_path, start_time, duration, fps, scale):
    command = [
        'ffmpeg',
        '-ss', str(start_time),
        '-t', str(duration),
        '-i', input_video_path,
        '-vf', f'fps={fps},scale={scale}:-1:flags=lanczos',
        '-c:v', 'gif',
        output_gif_path
    ]
    subprocess.run(command)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        video_files = request.files.getlist('video_files')
        start_times = request.form.getlist('start_times')
        durations = request.form.getlist('durations')
        fps = request.form['fps']
        scale = request.form['scale']
        custom_name = request.form['custom_name']  # 获取自定义文件名

        for index, video_file in enumerate(video_files):
            if video_file:
                input_video_path = os.path.join(app.config['UPLOAD_FOLDER'], video_file.filename)
                # 使用用户提供的自定义文件名生成 GIF 文件
                output_gif_path = os.path.join(app.config['OUTPUT_FOLDER'], f"{custom_name}_{index}.gif")
                video_file.save(input_video_path)
                convert_video_to_gif(input_video_path, output_gif_path, start_times[index], durations[index], fps, scale)

        return redirect(url_for('index'))  # 重定向回主页

    return render_template('index_plus.html')

@app.route('/output_gifs/<filename>')
def send_gif(filename):
    return send_from_directory(app.config['OUTPUT_FOLDER'], filename)

if __name__ == '__main__':
    app.run(debug=True)

HTML 页面代码 (`index_plus.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频转GIF工具</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f0f0;
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 50px auto;
            padding: 30px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }
        h1 {
            color: #4CAF50;
            margin-bottom: 20px;
        }
        input[type="file"], input[type="number"], input[type="text"] {
            margin: 10px 0;
            padding: 15px;
            width: calc(100% - 30px);
            border: 1px solid #ccc;
            border-radius: 5px;
            transition: border-color 0.3s;
        }
        input[type="file"]:hover, input[type="number"]:hover, input[type="text"]:hover {
            border-color: #4CAF50;
        }
        button {
            margin: 20px 0;
            padding: 15px;
            width: 100%;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #45a049;
        }
        footer {
            margin-top: 30px;
            font-size: 14px;
            color: #777;
        }
        .video-input {
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
        }
        .video-input div {
            margin-bottom: 10px;
        }
        @media (max-width: 600px) {
            .container {
                padding: 20px;
            }
            h1 {
                font-size: 24px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>视频转GIF工具</h1>
        <form action="/" method="post" enctype="multipart/form-data">
            <div class="video-input">
                <input type="file" name="video_files" accept="video/*" multiple required>
                <input type="number" name="start_times" placeholder="开始时间（秒）" required>
                <input type="number" name="durations" placeholder="持续时间（秒）" required>
            </div>
            <label for="fps">帧率 (fps):</label>
            <input type="number" name="fps" placeholder="例如: 10" required>

            <label for="scale">输出大小 (宽度):</label>
            <input type="text" name="scale" placeholder="例如: 320" required>

            <label for="custom_name">自定义文件名:</label>
            <input type="text" name="custom_name" placeholder="例如: my_gif" required>

            <button type="submit">转换为 GIF</button>
        </form>
        <footer>
            <p>© 2025 无限大</p>
        </footer>
    </div>
</body>
</html>

说明

Flask 应用 (app_plus.py)：
- 设置上传和输出文件夹。
- 提供一个函数 convert_video_to_gif，用来调用 FFmpeg 生成 GIF 文件。
- 在 / 路由中处理文件上传和 GIF 生成。
- 获取用户输入的自定义 GIF 文件名，生成的文件名为 自定义名字 + 索引 + .gif 以避免重名问题。
HTML 界面 (index_plus.html)：
- 创建一个用户输入界面，允许用户上传视频、设置时间参数、帧率和输出大小。
- 添加输入框让用户输入自定义 GIF 文件名。