ffmpeg.wasm设置图片转webp格式

NO.1
下载ffmpeg.wasm

github地址:https://github.com/ffmpegwasm/ffmpeg.wasm

文档地址:https://ffmpegwasm.netlify.app/

yarn安装依赖

yarn add @ffmpeg/ffmpeg @ffmpeg/core

NO.2
使用ffmpeg.wasm

本文示例为vue-cli3,文件为xxx.vue

引入ffmpeg

import { createFFmpeg, fetchFile } from "@ffmpeg/ffmpeg"

设置元素

input用来选择文件

img用来展示转码后的图片

 <input type="file" id="uploader" />
<img src="" alt="" id="ffmpegImage" />

封装方法

实例化ffmpeg并转码图片为webp格式

async initFfmpeg() {
      let that = this;
      // 设置文件名
      let preFix = `dsx2016.com_`;
      let timeStr = new Date().getTime() + `_image`;
      let afterName = `.webp`;
      let fileName = preFix + timeStr + afterName;
      const transcode = async ({ target: { files } }) => {
        const { name } = files[0];
        if (!ffmpeg.isLoaded()) {
          await ffmpeg.load();
        }
        ffmpeg.FS("writeFile", name, await fetchFile(files[0]));
        await ffmpeg.run("-i", name, fileName);
        const data = ffmpeg.FS("readFile", fileName);
        const ffmpegImage = document.getElementById("ffmpegImage");
        let blobFile = new Blob([data.buffer], { type: "image/webp" });
        ffmpegImage.src = URL.createObjectURL(blobFile);
      };
      document.getElementById("uploader").addEventListener("change", transcode);
},

官方代码仅供参开

页面挂载时实例化

mounted() {
  this.initFfmpeg();
},
NO.3
转码日志

实例化时注意先判断是否初始化过

ffmpeg.isLoaded()

NO.4
Tips

使用ffmpeg的一些原因

  1. 可以在前端浏览器中处理文件,不依赖网络,相对安全
  2. 不仅可以处理图片,还可以处理音频和视频,简单且优秀

需要注意的是

ffmpeg的使用需要在https协议下
参考

《前端ffmpeg.wasm视频压缩资源报错问题:SharedArrayBuffer is not defined》

END.