最新要闻

广告

手机

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

iphone11大小尺寸是多少?苹果iPhone11和iPhone13的区别是什么?

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞:犯罪嫌疑人已投案

家电

每日动态!图片压缩&视频截取

来源:博客园

背景

在我们开发网站的过程中,避免不了要对视频和图片进行一些处理。


(资料图)

场景一:用户上传的视频,我们需要将视频的某一帧截取出来作为视频的封面,便于在视频列表页显示为视频的预览,当然也可以截取某几帧生成一个gif动图。

场景二:用户上传的照片体积很大,我们在展示照片列表的时候,如果想要加载快,除了懒加载的方式(限制每次加载图片的数量,然后上滑继续加载),还可以在列表上只加载缩略图,然后进入详细页面后进行高清显示。

想要实现以上两个场景,如果你是用的是阿里云OSS存储,有提供的处理方式(收费),可以自行去查看:

这里介绍的处理方式是利用插件 ffmpeg 来处理。

实现前准备

FFmpeg 是一套可以用来记录、转换数字音频、视频,并能将其转化为流的开源计算机程序。可以轻易地实现多种视频格式之间的相互转换。这里我们只关注上面的两个场景。

打开https://ffmpeg.org/download.html下载对应系统的工具包,这里我们介绍windows和linux下的使用。

使用

一、Windows环境

1.下载

根据自己已安装的压缩工具,选择对应的稳定版

下载完成后,解压到非C盘的目录下,比如我解压到D:\tools\ffmpeg文件夹下,这时我们可以看到D:\tools\ffmpeg\bin下有3个exe执行文件,我们需要将该路径配置到path,就可以在任意命令窗口进行调用。

2.配置

打开系统设置-->点击环境变量-->点击用户变量中的Path-->添加D:\tools\ffmpeg\bin路径,点击确定和应用

打开命令行,运行ffmpeg -version,看到如下提示,就表示成功了

3.图片压缩

有一张图片D:\tools\ffmpeg-sta\avatar.jpg,将命令窗口切换至该目录,执行ffmpeg -i ./avatar.jpg -vf scale=-1:100 ./after.png

使用的就是命令ffmpeg -i image_source -vf scale=width:height out_source

,该命令中 image_source表示输入文件,out_source是输出文件,width和height分别是压缩后图片的宽和高,当某一项为-1时,表示图片保持原来的比例进行压缩。

下图是压缩并改变格式后的:

4.视频截帧

执行命令ffmpeg -i SampleVideo.mp4 -ss 1 -vframes 1 output.png获取视频1s时的帧。

获取到以下图片为视频1s时的帧:

在windows上的简单使用,只是演示以下功能,我们实际开发更多是在linux环境下实现开头说的图片和视频的处理场景,下面一起来看看。

二、linux环境

1.环境搭建

如果你购买了云服务器,可以在自己的服务器进行部署,如果只是想验证功能是否满足预期,可以搭建一个简单的服务器,可以参考我的上一篇文章

Multipass一款更轻量级的虚拟机

2.编写脚本

这里实现一个上传页面,上传图片后保存原图片和压缩后的图片,上传视频后保存视频和1s时截取的视频帧生成的图片,因为同涉及前后端实现,所以选择nuxt框架(https://nuxt.com.cn/)进行简单实现。

初始化一个项目,并安装依赖

npx nuxi init ffmpeg-testcd ffmpeg-test yarn install

前端

将app.vue文件中的

Welcome to the homepage

替换为,根目录下新建pages文件夹,并在该目录下新建index.vue文件,在这个文件中实现前端页面。

  <script setup lang="ts">  function getFile(e:any) {    const file = e.target.files[0];    let formData = new FormData();    formData.append("file",file);    $fetch("/api/upload", {method: "POST", body: formData}).then(res => {      console.log("res=>",res)    })  }</script>

服务端

在package.json中增加如下配置,运行yarn install安装插件

"dependencies": {    "axios": "^0.27.2",    "express": "^4.18.2",    "formidable": "^2.1.1"  },

根目录下新建server文件夹,该文件夹下新建api文件夹,然后在api文件夹下新建upload.js文件,在该文件中实现服务端的逻辑

// server/api/upload.jsimport path from "path"import formdata from "formidable"import cp from "child_process"import fs from "fs"const __dirname = path.resolve();export default defineEventHandler(async (event) => {  const request = event.node.req  const filePath = path.join(__dirname, "./", "uploads");  var form = new formdata.IncomingForm();  form.maxFileSize = 50 * 1024 * 1024;  form.multiples = true  form.uploadDir = filePath; //指定保存文件的路径,formidable会自动保存文件  request.files = {};  request.data = {};  await form.parse(request);  await form.on("file", function (name, file) {    console.log("file");    request.files[name] = file;//这里提取上传的文件  });  await form.on("end", async function () {    // 默认保存的文件名是随机串    for (var k in request.files) {      var f = request.files[k];      var n = "origin_" + f.originalFilename;      // 自己重新指定文件名和后缀      if (f.mimetype.indexOf("image/") == 0) {        await fs.renameSync(f.filepath, filePath + "/" + n);        // 图片压缩        await cp.execSync(`ffmpeg -i ${filePath}/origin_${f.originalFilename} -vf scale=-1:100 ${filePath}/after_${f.originalFilename}`)      } else if (f.mimetype.indexOf("video/") == 0) {        await fs.rename(f.filepath, filePath + "/" + n, async function (err) {          if (err) throw err;          // 视频抽帧          await cp.execSync(`ffmpeg -i ${filePath}/origin_${f.originalFilename} -ss 1 -vframes 1 ${filePath}/after_pic.png`)        });      }    }  });  return {    api: "works"  }})

pm2的方式启动,新增了ecosystem.config.js文件

module.exports = {  apps: [    {      name: "NuxtAppName",      port: "3300",      exec_mode: "cluster",      instances: "2",      script: "./.output/server/index.mjs"    }  ]}

package.json文件中scripts的build命令改为nuxt build & pm2 restart all

3.部署

命令行工具连接服务器,执行命令sudo apt-get install ffmpeg安装ffmpeg,安装完成后执行 ffmpeg -version,看到如下提示表示安装成功。

遇到问题先执行下面的命令

sudo add-apt-repository mainsudo add-apt-repository universesudo add-apt-repository restrictedsudo add-apt-repository multiverse 

将自己的代码下载到该服务器,或者使用我已经上传的示例 https://github.com/guduqiucai/ffmpeg-test.git,下载后切换到项目根目录,创建一个uploads目录,作为我们存储上传的文件的地方。

服务器安装插件

sudo apt install yarnsudo apt install nodejs npmsudo npm install pm2 -g

nuxt3运行需要node16.x及以上版本(可以使用nvm管理node版本)

git clone https://gitee.com/mirrors/nvmbash install.sh # 注意:进入nvm目录内执行nvm -version # 查看版本nvm install v16.16.0

切换到项目根目录,执行yarn install安装依赖,如果报错,先执行下面的命令

sudo apt remove cmdtestsudo apt remove yarncurl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.listsudo apt updatesudo apt install yarn

安装完成后执行yarn build编译并启动项目,如下图所示服务就正常启动了

这里我的multipass 地址是 172.17.166.77, 而且我们设置的pm2监听端口是3000,所以打开浏览器,访问http://172.17.166.77:3000/可以正常看到如下图所示页面:

上传一个图片,查看服务器存储结果,如下图所示出现了原图片origin_avatar.jpg和压缩后的图片after_avatar.jpg:

上传一个视频,查看服务器存储结果,如下图所示出现了原视频文件origin_SampleVideo.mp4和抽帧的图片after_pic.png:

到这里就简单实现了我们开始说的场景,Over~。

关键词: