当前位置：首页 > VUE

vue实现图片转视频

2026-02-23 21:42:50VUE

Vue 实现图片转视频的方法

在 Vue 中实现图片转视频的功能可以通过多种方式完成，以下是几种常见的方法：

vue实现图片转视频

使用 Canvas 和 MediaRecorder API

通过 Canvas 绘制图片序列，再使用 MediaRecorder API 录制为视频。

vue实现图片转视频

<template>
  <div>
    <canvas ref="canvas" width="640" height="480"></canvas>
    <button @click="startRecording">开始录制</button>
    <button @click="stopRecording">停止录制</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mediaRecorder: null,
      chunks: [],
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg'],
      currentIndex: 0
    };
  },
  methods: {
    drawImage() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      const img = new Image();
      img.src = this.images[this.currentIndex];
      img.onload = () => {
        ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
        this.currentIndex = (this.currentIndex + 1) % this.images.length;
      };
    },
    startRecording() {
      const canvas = this.$refs.canvas;
      const stream = canvas.captureStream(30);
      this.mediaRecorder = new MediaRecorder(stream);
      this.mediaRecorder.ondataavailable = (e) => {
        this.chunks.push(e.data);
      };
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.chunks, { type: 'video/webm' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'video.webm';
        a.click();
      };
      this.mediaRecorder.start();
      setInterval(this.drawImage, 1000 / 30);
    },
    stopRecording() {
      this.mediaRecorder.stop();
    }
  }
};
</script>

使用 FFmpeg.js

FFmpeg.js 是一个可以在浏览器中运行的 FFmpeg 版本，适合处理复杂的视频转换任务。

<template>
  <div>
    <input type="file" @change="handleFileUpload" multiple accept="image/*">
    <button @click="convertToVideo">转换为视频</button>
  </div>
</template>

<script>
import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });

export default {
  data() {
    return {
      files: []
    };
  },
  methods: {
    async handleFileUpload(e) {
      this.files = Array.from(e.target.files);
    },
    async convertToVideo() {
      if (!ffmpeg.isLoaded()) {
        await ffmpeg.load();
      }
      for (let i = 0; i < this.files.length; i++) {
        ffmpeg.FS('writeFile', `img${i}.png`, await fetchFile(this.files[i]));
      }
      await ffmpeg.run(
        '-framerate', '30',
        '-i', 'img%d.png',
        '-c:v', 'libx264',
        '-pix_fmt', 'yuv420p',
        'output.mp4'
      );
      const data = ffmpeg.FS('readFile', 'output.mp4');
      const url = URL.createObjectURL(new Blob([data.buffer], { type: 'video/mp4' }));
      const a = document.createElement('a');
      a.href = url;
      a.download = 'output.mp4';
      a.click();
    }
  }
};
</script>

使用第三方库如 html-to-video

一些第三方库如 html-to-video 可以简化视频生成过程。

<template>
  <div ref="container">
    <img v-for="(img, index) in images" :key="index" :src="img" />
  </div>
  <button @click="generateVideo">生成视频</button>
</template>

<script>
import { toVideo } from 'html-to-video';

export default {
  data() {
    return {
      images: ['image1.jpg', 'image2.jpg', 'image3.jpg']
    };
  },
  methods: {
    async generateVideo() {
      const video = await toVideo(this.$refs.container, {
        fps: 30,
        duration: 5
      });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(video);
      a.download = 'video.mp4';
      a.click();
    }
  }
};
</script>