feat(new tool): GIF to MP4

Fix #336

Author: sharevb

locales/en.yml

@@ -11,6 +11,7 @@ server {
     add_header X-Permitted-Cross-Domain-Policies none;
     add_header Cross-Origin-Resource-Policy same-site;
     add_header Cross-Origin-Opener-Policy same-origin;
+    add_header Cross-Origin-Embedder-Policy require-corp;
     #add_header Content-Security-Policy "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' http: https: blob:; style-src 'self' 'unsafe-inline' https: http:; img-src 'self' data: blob: https: http:; connect-src data: blob: https: http:; font-src 'self' https: http:; object-src 'none'; base-uri 'self'; form-action 'self';";
     location / {
         rewrite ^/it-tools/(.*) /$1 break;

nginx.conf

@@ -46,6 +46,8 @@
     "@date-fns/utc": "^2.1.1",
     "@dice-roller/rpg-dice-roller": "^5.5.1",
     "@faker-js/faker": "^10.2.0",
+    "@ffmpeg/ffmpeg": "^0.12.15",
+    "@ffmpeg/util": "^0.12.2",
     "@finegym/fitness-calc": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",

package.json

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import { ref } from 'vue';
+import { FFmpeg } from '@ffmpeg/ffmpeg';
+
+import ffmpegClassWorkerUrl from '@ffmpeg/ffmpeg/worker?worker&url';
+
+import { toBlobURL } from '@ffmpeg/util';
+
+const { t } = useI18n();
+
+const logs = ref<string[]>([]);
+
+const ffmpeg = new FFmpeg();
+ffmpeg.on('log', ({ message }) => {
+  logs.value.push(message);
+});
+
+const loading = ref(false);
+const error = ref('');
+const loop = ref('5');
+
+async function loadFFmpeg() {
+  if (!ffmpeg.loaded) {
+    const baseURL = 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/esm';
+
+    await ffmpeg.load({
+      coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+      wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
+      classWorkerURL: ffmpegClassWorkerUrl,
+    });
+  }
+}
+
+async function onFileUploaded(gifFile: File) {
+  loading.value = true;
+  error.value = '';
+
+  try {
+    await loadFFmpeg();
+
+    const inputName = 'input.gif';
+    const outputName = 'output.mp4';
+
+    const buffer = new Uint8Array(await gifFile.arrayBuffer());
+    if (!buffer) {
+      return;
+    }
+    ffmpeg.writeFile(inputName, buffer);
+
+    await ffmpeg.exec([
+      '-stream_loop', loop.value,
+      '-i', inputName,
+      '-movflags', 'faststart',
+      '-pix_fmt', 'yuv420p',
+      '-vf', 'scale=trunc(iw/2)*2:trunc(ih/2)*2',
+      outputName,
+    ]);
+
+    const data = await ffmpeg.readFile(outputName);
+    const blob = new Blob([data], { type: 'video/mp4' });
+    const url = URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `${gifFile.name.replace(/\.gif$/, '')}.mp4`;
+    a.click();
+
+    URL.revokeObjectURL(url);
+  }
+  catch (err: any) {
+    error.value = err.toString();
+  }
+  finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div>
+    <n-space justify="center" mb-1>
+      <n-form-item :label="t('tools.gif-to-mp4.texts.label-stream-loop')" label-placement="left">
+        <n-input-number-i18n v-model:value="loop" :min="1" />
+      </n-form-item>
+    </n-space>
+
+    <div style="flex: 0 0 100%">
+      <div mx-auto max-w-600px>
+        <c-file-upload
+          :title="t('tools.gif-to-mp4.texts.title-drag-and-drop-gif-here-or-click-to-select-a-file')"
+          accept=".gif"
+          @file-upload="onFileUploaded"
+        />
+      </div>
+    </div>
+
+    <div mt-3 flex justify-center>
+      <c-alert v-if="error" type="error">
+        {{ error }}
+      </c-alert>
+      <n-spin
+        v-if="loading"
+        size="small"
+      />
+    </div>
+
+    <c-card :title="t('tools.gif-to-mp4.texts.title-logs')">
+      <pre>{{ logs.join('\n') }}</pre>
+    </c-card>
+  </div>
+</template>

pnpm-lock.yaml

@@ -0,0 +1,15 @@
+import { translate as t } from '@/plugins/i18n.plugin';
+import { VideoPlus } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: t('tools.gif-to-mp4.title'),
+  path: '/gif-to-mp4',
+  description: t('tools.gif-to-mp4.description'),
+  keywords: ['gif', 'ffmpeg', 'mp4'],
+  component: () => import('./gif-to-mp4.vue'),
+  icon: VideoPlus,
+  createdAt: new Date('2026-03-15'),
+  category: 'Images',
+  externalHTMLContent: 'Download FFMPEG from https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10. All processing done in your browser.',
+});

src/tools/gif-to-mp4/gif-to-mp4.vue

@@ -178,4 +178,10 @@ export default defineConfig({
       },
     },
   },
+  server: {
+    headers: {
+      'Cross-Origin-Opener-Policy': 'same-origin',
+      'Cross-Origin-Embedder-Policy': 'require-corp',
+    },
+  },
 });