feat: 视频抽帧工具添加 WebP 格式支持并更新文案

2026-02-03 11:19:21 +08:00
parent d8417bdab4
commit a17432e3b6
8 changed files with 51 additions and 36 deletions
--- a/src/app/(dashboard)/tools/video-frames/layout.tsx
+++ b/src/app/(dashboard)/tools/video-frames/layout.tsx
@@ -7,13 +7,13 @@ export async function generateMetadata(): Promise<Metadata> {
  const lang = acceptLanguage.includes("zh") ? "zh" : "en";

  const titles = {
-    en: "Video to Frames - Extract Frames from Videos",
-    zh: "视频抽帧 - 从视频中提取帧",
+    en: "Video to Frame Sequence - Extract Frame Sequences from Videos",
+    zh: "视频转序列帧 - 从视频中提取序列帧",
  };

  const descriptions = {
-    en: "Extract frames from videos with customizable frame rates. Perfect for sprite animations and game asset preparation. Supports MP4, MOV, AVI, WebM.",
-    zh: "从视频中提取帧，可自定义帧率。非常适合精灵动画制作和游戏素材准备。支持 MP4、MOV、AVI、WebM。",
+    en: "Extract frame sequences from videos with customizable frame rates. Perfect for sprite animations and game asset preparation. Supports MP4, MOV, AVI, WebM.",
+    zh: "从视频中提取序列帧，可自定义帧率。非常适合精灵动画制作和游戏素材准备。支持 MP4、MOV、AVI、WebM。",
  };

  return {
--- a/src/app/(dashboard)/tools/video-frames/page.tsx
+++ b/src/app/(dashboard)/tools/video-frames/page.tsx
@@ -61,7 +61,7 @@ export default function VideoToFramesPage() {

  // 设置相关状态
  const [frameRate, setFrameRate] = useState<number>(15);
-  const [format, setFormat] = useState<'image/png' | 'image/jpeg'>('image/png');
+  const [format, setFormat] = useState<'image/png' | 'image/jpeg' | 'image/webp'>('image/png');
  const [jpegQuality, setJpegQuality] = useState<number>(0.92);

  // 提取状态
@@ -360,7 +360,7 @@ export default function VideoToFramesPage() {

    try {
      const zip = new JSZip();
-      const ext = format === 'image/png' ? 'png' : 'jpg';
+      const ext = format === 'image/png' ? 'png' : format === 'image/webp' ? 'webp' : 'jpg';

      for (const frame of selectedFrames) {
        // 将 dataUrl 转为 Blob
@@ -441,6 +441,14 @@ export default function VideoToFramesPage() {
            >
              JPG
            </Button>
+            <Button
+              variant={format === 'image/webp' ? 'default' : 'ghost'}
+              size="sm"
+              onClick={() => setFormat('image/webp')}
+              className={format === 'image/webp' ? 'bg-emerald-600 hover:bg-emerald-700' : ''}
+            >
+              WebP
+            </Button>
          </div>
          {videoFile && (
            <Button
@@ -678,11 +686,11 @@ export default function VideoToFramesPage() {
                </p>
              </div>

-              {/* JPEG 质量设置（仅 JPG 格式时显示） */}
-              {format === 'image/jpeg' && (
+              {/* JPEG/WebP 质量设置 */}
+              {(format === 'image/jpeg' || format === 'image/webp') && (
                <div className="space-y-3">
                  <div className="flex items-center justify-between">
-                    <label className="text-sm font-medium">JPG 质量</label>
+                    <label className="text-sm font-medium">{format === 'image/webp' ? 'WebP' : 'JPG'} 质量</label>
                    <span className="text-sm font-medium text-emerald-600">
                      {Math.round(jpegQuality * 100)}%
                    </span>
@@ -821,7 +829,11 @@ export default function VideoToFramesPage() {
              </span>
              <span>
                输出格式:{' '}
-                {format === 'image/png' ? 'PNG（无损）' : `JPG（${Math.round(jpegQuality * 100)}% 质量）`}
+                {format === 'image/png'
+                  ? 'PNG（无损）'
+                  : format === 'image/webp'
+                    ? `WebP（${Math.round(jpegQuality * 100)}% 质量）`
+                    : `JPG（${Math.round(jpegQuality * 100)}% 质量）`}
              </span>
            </div>
          </CardContent>
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -28,7 +28,7 @@ export const metadata: Metadata = {
    "PNG optimizer",
    "JPEG compressor",
    "video converter",
-    "video to frames",
+    "video to frame sequence",
    "video processing",
    "audio compression",
    "audio converter",
@@ -46,7 +46,7 @@ export const metadata: Metadata = {
    "WebP转换",
    "PNG优化",
    "视频转换",
-    "视频抽帧",
+    "视频转序列帧",
    "音频压缩",
    "音频转换",
    "纹理图集",
--- a/src/app/sitemap.ts
+++ b/src/app/sitemap.ts
@@ -23,12 +23,12 @@ const tools: ToolPage[] = [
  {
    path: "/tools/video-frames",
    en: {
-      title: "Video to Frames - Extract Frames from Videos",
-      description: "Extract frames from videos with precision control. Support for MP4, WebM and other video formats. Export as PNG or ZIP.",
+      title: "Video to Frame Sequence - Extract Frame Sequences from Videos",
+      description: "Extract frame sequences from videos with precision control. Support for MP4, WebM and other video formats. Export as PNG, WebP or ZIP.",
    },
    zh: {
-      title: "视频抽帧 - 从视频中提取帧",
-      description: "精确控制从视频中提取帧。支持 MP4、WebM 等视频格式。导出为 PNG 或 ZIP。",
+      title: "视频转序列帧 - 从视频中提取序列帧",
+      description: "精确控制从视频中提取序列帧。支持 MP4、WebM 等视频格式。导出为 PNG、WebP 或 ZIP。",
    },
    lastModified: new Date("2025-01-01"),
  },
--- a/src/components/seo/StructuredData.tsx
+++ b/src/components/seo/StructuredData.tsx
@@ -35,7 +35,7 @@ export function WebSiteStructuredData({ lang = "en" }: WebSiteProps) {
      description:
        "Free online tools for game developers. Compress and convert images (PNG, JPEG, WebP), extract frames from videos, compress audio files, generate texture atlases and sprite sheets. All processing happens locally in your browser - no uploads, complete privacy.",
      keywords:
-        "image compression, image converter, WebP converter, PNG optimizer, video converter, video to frames, audio compression, texture atlas, sprite sheet generator, game development tools, browser-based tools",
+        "image compression, image converter, WebP converter, PNG optimizer, video converter, video to frame sequence, audio compression, texture atlas, sprite sheet generator, game development tools, browser-based tools",
      inLanguage: "en-US",
      potentialAction: {
        "@type": "SearchAction",
@@ -50,9 +50,9 @@ export function WebSiteStructuredData({ lang = "en" }: WebSiteProps) {
      name: "KYMR.TOP",
      alternateName: "KYMR游戏工具",
      description:
-        "专为游戏开发者设计的免费在线工具平台。支持图片压缩转换(PNG、JPEG、WebP)、视频抽帧转换、音频压缩、纹理图集生成、精灵图制作。浏览器本地处理，无需上传，保护隐私。",
+        "专为游戏开发者设计的免费在线工具平台。支持图片压缩转换(PNG、JPEG、WebP)、视频转序列帧、音频压缩、纹理图集生成、精灵图制作。浏览器本地处理，无需上传，保护隐私。",
      keywords:
-        "图片压缩, 图片转换, WebP转换, PNG优化, 视频转换, 视频抽帧, 音频压缩, 音频转换, 纹理图集, 精灵图生成, 游戏开发工具, 游戏素材工具, 在线工具, 隐私保护",
+        "图片压缩, 图片转换, WebP转换, PNG优化, 视频转换, 视频转序列帧, 音频压缩, 音频转换, 纹理图集, 精灵图生成, 游戏开发工具, 游戏素材工具, 在线工具, 隐私保护",
      inLanguage: "zh-CN",
    },
  };
--- a/src/lib/frame-extractor.ts
+++ b/src/lib/frame-extractor.ts
@@ -21,8 +21,8 @@ export interface ExtractedFrame {

 export interface ExtractionSettings {
  frameRate: number; // 帧率（5-30）
-  format: "image/png" | "image/jpeg"; // 输出格式
-  quality: number; // JPEG 质量（0-1），PNG 忽略此参数
+  format: "image/png" | "image/jpeg" | "image/webp"; // 输出格式
+  quality: number; // JPEG/WebP 质量（0-1），PNG 忽略此参数
  startTime?: number; // 起始时间（秒）
  endTime?: number; // 结束时间（秒）
 }
@@ -196,7 +196,10 @@ export const extractFrames = async (
          ctx.drawImage(video, 0, 0);

          // 导出为图片
-          const dataUrl = canvas.toDataURL(format, format === "image/jpeg" ? quality : undefined);
+          const dataUrl = canvas.toDataURL(
+          format,
+          format === "image/jpeg" || format === "image/webp" ? quality : undefined
+        );

          const frame: ExtractedFrame = {
            id: `frame-${i}-${Date.now()}`,
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -107,12 +107,12 @@
      "title": "Level up your production pipeline today",
      "description": "Start with one tool. Build a faster, more professional workflow. Every asset counts.",
      "primaryCta": "Get started",
-      "secondaryCta": "Try Video to Frames"
+      "secondaryCta": "Try Video to Frame Sequence"
    },
    "tools": {
      "videoToFrames": {
-        "title": "Video to Frames",
-        "description": "Extract frames from videos with customizable frame rates. Perfect for sprite animations."
+"title": "Video to Frame Sequence",
+      "description": "Extract frame sequences from videos with customizable frame rates. Perfect for sprite animations."
      },
      "imageCompression": {
        "title": "Image Compression",
@@ -156,7 +156,7 @@
  "sidebar": {
    "tools": "Tools",
    "aiTools": "More Tools",
-    "videoToFrames": "Video to Frames",
+    "videoToFrames": "Video to Frame Sequence",
    "imageCompression": "Image Compression",
    "audioCompression": "Audio Compression",
    "textureAtlas": "Texture Atlas",
@@ -269,8 +269,8 @@
      ]
    },
    "videoFrames": {
-      "title": "Video to Frames",
-      "description": "Extract frames from videos with customizable settings",
+      "title": "Video to Frame Sequence",
+      "description": "Extract frame sequences from videos with customizable settings",
      "processVideo": "Process Video",
      "howItWorks": "How it works",
      "steps": [
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -46,7 +46,7 @@
    "hero": {
      "kicker": "游戏开发的资产工程化",
      "title": "为游戏制作提供工具、创意与赋能",
-      "description": "视频抽帧、图片压缩、音频优化、纹理合图。完整的游戏开发资产工具链，加速制作流程，赋能创意表达。",
+      "description": "视频转序列帧、图片压缩、音频优化、纹理合图。完整的游戏开发资产工具链，加速制作流程，赋能创意表达。",
      "startBuilding": "开始创作",
      "secondaryCta": "了解工具",
      "note": "无需安装。浏览器打开即用。本地处理，完全私密。",
@@ -107,12 +107,12 @@
      "title": "现在开始，为游戏制作提效",
      "description": "从第一份资产开始，建立你的专业工作流程。让工具处理重复工作，让创意自由发挥。",
      "primaryCta": "立即开始",
-      "secondaryCta": "先试试视频抽帧"
+      "secondaryCta": "先试试视频转序列帧"
    },
    "tools": {
      "videoToFrames": {
-        "title": "视频抽帧",
-        "description": "从视频中提取帧，可自定义帧率。非常适合精灵动画制作。"
+"title": "视频转序列帧",
+      "description": "从视频中提取序列帧，可自定义帧率。非常适合精灵动画制作。"
      },
      "imageCompression": {
        "title": "图片压缩",
@@ -156,7 +156,7 @@
  "sidebar": {
    "tools": "工具",
    "aiTools": "更多工具",
-    "videoToFrames": "视频抽帧",
+    "videoToFrames": "视频转序列帧",
    "imageCompression": "图片压缩",
    "audioCompression": "音频压缩",
    "textureAtlas": "合图工具",
@@ -269,8 +269,8 @@
      ]
    },
    "videoFrames": {
-      "title": "视频抽帧",
-      "description": "从视频中提取帧，可自定义设置",
+      "title": "视频转序列帧",
+      "description": "从视频中提取序列帧，可自定义设置",
      "processVideo": "处理视频",
      "howItWorks": "工作原理",
      "steps": [
@@ -380,7 +380,7 @@
    "compressionHint": "开启后使用 PNG 量化压缩，可大幅减小文件体积（类似 TinyPNG）"
  },
  "footer": {
-    "tagline": "KYMR.TOP - 专业的游戏开发资产工具平台。图片压缩转换、视频抽帧、音频优化、纹理合图。浏览器本地处理，助力游戏制作提效。",
+    "tagline": "KYMR.TOP - 专业的游戏开发资产工具平台。图片压缩转换、视频转序列帧、音频优化、纹理合图。浏览器本地处理，助力游戏制作提效。",
    "note": "为游戏开发者打造的工具链。简洁、专业、可信赖。",
    "sections": {
      "tools": "工具",