个人学习笔记，按照官方案例自己跑了一遍`react-router`。通过类比`vue-router` 写了一些总结， 所以不是很推荐阅读。 建议读者也跟着官方案例走一遍。


# 简介
[官方文档](https://reactrouter.com/en/main)

- `react-router`包含3个库，`react-router`、`react-router-dom`和`react-router-native`。
- `react-router-dom`(浏览器) 和 `react-router-native`（RN） 都依赖`react-router`，所以在安装时，`react-router`也会⾃动安装。
- `react-router-dom` v6与v5发生了不兼容性的变更
   - v5版本奉行**⼀切皆组件的思想。**路由器-Router、链接-Link、路由-Route、独占-Switch、重定向-Redirect都以组件形式存在
   - v6 对v5做了些不兼容的变更，还提供了类似vue-router配置化的方式
   - `react-router`官方文档老是提到[@reach/router](https://reach.tech/router/) 后者v2版本已经合并到了`react-router@6`

# 快速入门
推荐看这篇：[**官方教程*一个通讯录的增删改查的小应用**](https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md)，我按照官方教程自己撸了一遍，[**代码点击这里**](https://github.com/guojingwen/frontend-project/tree/main/react_study/7.router-office-v6)，这里简单做一些总结，加强一下记忆，由于本人多年来都是使用`Vue`搬砖，掌握`react-router`最快的方式是类比`vue-router`

1. 先来看一下框架

![image.png](/static/img/28e56bfa8bf886a7e78f0a0e72637168.image.webp)
- `vue-router` 3与4 的语法糖的异同
    - 引入时有些差异，里层路由的配置基本一样
    - 版本4 提供了两个钩子`useRoute`和`useRouter`等价于`this.$route`和 `this.$router`
    - 版本4 完全仍旧可以使用`OptionsAPI`
- `react-router`最新版本是6，本文主要是探讨6版本的语法糖，最后在补充一些`react-router`@6与5版本的区别。

2. 再来看一下内核配置，我们来写一个嵌套路由和动态路由的示例
![image.png](https://blog.warmplace.cn:11443/static/img/7fc5ae1cda6153a8afc8e410dbc1a194.image.webp)
- `react-router` 的`element` 对应 `vue-router`的`compoent`
- 嵌套路由, `vue`还需要在父路由页面模板中放置`<router-view/>`
- 动态路由，`vue`通过 `$route.params` or `useRoute()`取值，`react`这边还需要配置`loader({params})`，通过`params`取值
- `loader`除获取路由参数，还可以做一些额外的事情，`vue-router`中没有`loader`的概念，可以用`beforeMout`或`create`模拟实现，然而`vue-router`中的`meta`字段，`react-router`也是要模拟

3. 再来看一下错误页面(也就404页面)的示例

![image.png](https://blog.warmplace.cn:11443/static/img/fa312773c55ea09396930e9dbac8ea26.image.webp)

- `react-router`中只要遇到错误就渲染`errorElement`，vue中需要模拟实现，1）模拟不存在的路由，2）使用 `try...catch` 或 `errorHandler` 捕捉错误然后重定向到错误页面或渲染错误组件
- 默认页面 
   - `react-router` `{ index: true, element: <Index/> },`
   - `vue-router` 使用 `v-if`/`v-else` + `<router-view/>`方式模拟
4. `Form` 和 `action`  
   - 用于路由跳转和动作派发，可类比 vue的API跳转和路由守卫，
   - `react-router`把一些`form`的事情（表单提交、搜索）和路由做了挂钩，并提供了一些组件和钩子
- 组件有 `Form`、`NavLink`、`Outlet`
- 钩子 `useLoaderData`、`useFetcher`
> 在Vue中有路由守卫的概念:
> 1. 导航被触发
> 2. 在失活组件调用beforeRouteLeave守卫
> 3. 调用全局的beforeEach守卫
> 4. 再重用的组件调用beforeRouteUpdate
> 5. 在路由配置里调用beforeEnter
> 6. 解析异步路由组件
> 7. 在激活的组件中调用beforeRouteEnter
> 8. 调用全局的beforeResolve
> 9. 导航被确认
> 10. 调用全局的afterEach钩子
> 11. 触发DOM更新
> 12. 调用beforeRouteEnter守卫中传给next的回调函数

`react-router`没有路由守卫的概念，`loader+action`可以模拟这些行为

5. 其它一些可以对标的点 `react-touter`   	`vs` 	`vue-router`
   - `<Outlet/>`				-				`<router-view>`	
   - `<NavLink/>`				-				`<router-link>`
   - `redirect`				-				`$router.replace` 或路由表里配置 `redirect`
   - `useNavigation`			- 				`$router.go`、`$router.push`
   - `submit`					- 				`$router.replace `、`$router.push`
   
# JSX Routes 与 options Routes

![image.png](https://blog.warmplace.cn:11443/static/img/7c2b94153692c8a6b5038f7f66957028.image.webp)

# React-router@5升级到6
[官方文档](https://github.com/remix-run/react-router/blob/main/docs/upgrading/v5.md)

React-router学习笔记

React组件化技术

本文梳理React状态管理的一些方案，包括以下内容
1. `Context`用法
2. `redux`使用和简易实现
3. `mobx`介绍



> 使用React开发一个页面，我们通常将一个页面划分若干个区域（这些区域存在嵌套关系，一个父区域可能包含多个子区域）。每个区域对应一个组件，每个组件可能有一些状态。
> - 只属于该组件的状态用`state`表示
> - 兄弟组件之间的状态需要提取到父组件中，用`state`表示，使用`props`向下传递
> - 不同层级组件之间的状态，如果提取到祖先组件的`state`中，`props`往下传递会非常冗肿，`React`官方提供了`Context`方案，解决跨组件通信问题。

# Context
> [官方context使用](https://react.docschina.org/docs/context.html)  [redux中文文档](https://www.redux.org.cn/)

**`Context`提供了一个无需为每层组件手动添加 `props`，就能在组件树间进行数据传递的方法。**

**何时使用`Context`**<br>
`Context` 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言。

**使用`Context`之前的考虑**<br>
`Context`主要应用场景在于**很多不同层级的组件需要访问同样一些的数据**。请谨慎使用，因为这会使得组件的复用性变差。<br>
**如果你只是想避免层层传递一些属性，[组件组合（component composition）](https://react.docschina.org/docs/composition-vs-inheritance.html)有时候是一个比 context 更好的解决方案。**

## 基本使用
官方给了一个`theme`案例，非常清晰，这里为了讲下面的内容还是把代码贴出来
```jsx
import React from "react";
// Context 可以让我们无须明确地传遍每一个组件，就能将值深入传递进组件树。
// 为当前的 theme 创建一个 context（“light”为默认值）。
const ThemeContext = React.createContext('light');
export default class App extends React.Component {
  render() {
    // 使用一个 Provider 来将当前的 theme 传递给以下的组件树。
    // 无论多深，任何组件都能读取这个值。
    // 在这个例子中，我们将 “yellow” 作为当前的值传递下去。
    return (
      <ThemeContext.Provider value="yellow">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中间的组件再也不必指明往下传递 theme 了。
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 指定 contextType 读取当前的 theme context。
  // React 会往上找到最近的 theme Provider，然后使用它的值。
  // 在这个例子中，当前的 theme 值为 “yellow”。
  static contextType = ThemeContext; // 固定写法，感觉像hack
  render() {
    return <button style={{backgroundColor: this.context}}>ThemedButton</button>;
  }
}

// 使用context步骤
// 1. 创建 createContext
// 2. Provider接收value，以保证有传下去的数据
// 3. 接收 Consumer或者class.contextType
```
上述案例有个梗，
`static contextType = ThemeContext;`注入` this.context`获取，这是react的固定写法
该方式并不适用Function组件。

## Function组件如何使用？

修改`ThemedButton`为`function`
```jsx
function ThemedButton() {
  let bgColor = React.useContext(ThemeContext);
  return <button style={{backgroundColor: bgColor}}>
      ThemedButton
  </button>;
}
```

## 多个context使用案例
用户信息和主题色是项目中常用的两个全局状态
```jsx
const ThemeContext = React.createContext('light');
const PersonContext = React.createContext('XXX');
function Ancestor() {
    const [color, setColor] = React.useState('yellow');
    const [person, setPerson] = React.useState({name: 'zs', age: 12})

    return <ThemeContext.Provider value={color}>
        <button onClick={() => setColor(color === 'yellow' ? 'blue' : 'yellow')}>修改颜色</button>
        <button onClick={() => setPerson(Object.assign({}, person, {
            name: person.name === 'zs' ? 'ls' : 'zs'
        }))}>修改Person</button>

        <PersonContext.Provider value={person}>
            <Parent></Parent>
        </PersonContext.Provider>
    </ThemeContext.Provider>
}
function Parent() {
    return <Child/>
}
class Child extends React.Component {
    render() {
        return (
        <div>
            <h3>MultiContextUse</h3>
            <ThemeContext.Consumer>
            {theme => (
                <PersonContext.Consumer>
                {user => <div style={{backgroundColor: theme}}>{user.name}</div>}
                </PersonContext.Consumer>
            )}
            </ThemeContext.Consumer>
        </div>
        );
    }
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Ancestor/>);
```
多个`context`使用 通过`Context.Consumer`标签来接收内容，符合`JSX`语法。

> 注意事项
> - 要把value 状态提升到父节点的 state里面 [原因](https://react.docschina.org/docs/context.html#caveats)

## 总结
在`React`的官方文档中， `Context` 被归类为高级部分，属于React的⾼级API，但官⽅并不建议在稳定版的App中使用Context。
不过，这并非意味着我们不需要关注 Context 。
事实上，很多优秀的React组件都通过Context来完成⾃己的功能，

- ⽐如`react-redux`的`<Provider />`，就是通过`Context`提供一个全局态的`store`，
- 路由组件`react-router`通过 `Context` 管理路由状态等。

在React组件开发中，如果用好 Context ，可以让你的组件变得强⼤，而且灵活。
> 函数组件中可以通过useContext引⼊上下文。

															
# redux
redux是JavaScript应⽤的状态容器。它保证程序⾏为⼀致性 且易于测试。

![image.png](https://blog.warmplace.cn:11443/static/img/3ac61f2a017e2c387147619a8befa198.image.webp)

## 介绍
> 你可能不需要redux
> Redux 是负责组织 state 的工具，但你也要考虑它是否适合你的情况。不要因为有⼈告诉你要用 Redux就去用，花点时间好好想想使⽤了 Redux 会带来的好处或坏处。<br><br>
> 在下⾯的场景中，引入 Redux 是⽐较明智的:
> - 你有着相当大量的、随时间变化的数据;
> - 你的 state 需要有一个单一可靠数据来源;
> - 你觉得把所有 state 放在最顶层组件中已经无法满足需要了。
> - 某个组件的状态需要共享。<br>
> 以上内容摘抄自官网

`redux` 是 `JavaScript`应⽤的状态容器，提供可预测化的状态管理。它保证程序行为一致性且易于测试。

![image.png](https://blog.warmplace.cn:11443/static/img/edb7c90790e6748f9b95f20dec8cfa94.image.webp)

## 手写redux
这里写了一下redux, react-redux的简易实现

<img width=200 src='https://blog.warmplace.cn:11443/static/img/2339b3d89497c2b8df259c36d9d7a5ac.image.webp'>

[源码点这里](https://github.com/guojingwen/frontend-project/tree/main/react_study)


# react-redux
## 使用
```jsx
// redux 完整使用
import React, {Component} from "react";
import {bindActionCreators} from 'redux'

import {connect} from 'react-redux'
// connect帮组⼦组件与store链接，其实就是⾼阶组件，这⾥返回的是⼀个新的组件
export default connect(
    // mapStateToProps Function (state, [ownProps])
    // state => ({count: state}),
    // !谨慎使⽤ownProps，如果它发⽣变化，mapStateToProps就会执⾏，⾥⾯的state会被重新计算，容易影响性能
    (state, ownProps) => {
        // console.log('mapStateToProps ownProps ', ownProps);
        return {
            count: state
        }
    },
    // mapDispatchToProps Object/Function 如果不定义 默认把dispatch注⼊组件
    // 如果是对象的话，原版的dispatch就没有被注⼊了
    // {
    //     add: () => ({type: 'ADD'})
    // },
    //  Function (dispatch, [ownProps])
    //  !谨慎使⽤ownProps，如果它发⽣变化，mapDispatchToProps就会执⾏，容易影响性能
    (dispatch) => {
        let res = {
            add: () => ({type: "ADD"}),
            minus: () => ({type: "MINUS"})
        };
        res = bindActionCreators(res, dispatch);
        return {
            dispatch,
            ...res
        };
    },
    // mergeProps Function
    // 如果指定了这个参数，`mapStateToProps()` 与 `mapDispatchToProps()` 的执⾏结果和组件⾃身的 `props` 将传⼊到这个回调函数中。
    // (stateProps, dispatchProps, ownProps) => {
        // console.log("mergeProps", stateProps, dispatchProps); //sy-log
        // return {omg: "omg", ...stateProps, ...dispatchProps};
    // }
)(class ReactReduxPage extends Component{
    render() {
        // console.log(this.props);
        const {count, dispatch, add, minus} = this.props;
        return <div>
            <h3>ReactReduxPage</h3>
            <p>{count}</p>
            <button onClick={() => dispatch({type: "ADD"})}>
                add use dispatch
              </button>
            <button onClick={add}>add</button>
            <button onClick={minus}>minus</button>
        </div>
    }
});
```
## 简易实现
```jsx
import React, {Component} from 'react';
const ValueContext = React.createContext();

export const connect = (
    mapStateToProps = state => state,
    mapDispatchToProps,
) =>  WrapperComponent => {
    return class extends Component {
        static contextType = ValueContext;
        constructor(props) {
            super(props);
            this.state = {
                props: {}
            };
        }
        componentDidMount() {
            this.update();
            const {subscribe} = this.context;
            subscribe(() => {
                this.update();
            })
        }
        update () {
            const {getState, dispatch} = this.context;
            const stateProps =
                mapStateToProps(getState());
            let dispatchProps;
            if(typeof mapDispatchToProps === 'function') {
                dispatchProps = mapDispatchToProps(dispatch, this.props)
            } else if (typeof mapDispatchToProps === 'object') {
                dispatchProps = bindActionCreators(mapDispatchToProps, dispatch)
            } else {
                dispatchProps = {
                    dispatch,
                }
            }
            this.setState({
                props: {
                    ...stateProps,
                    ...dispatchProps,
                }
            })
        }
        render () {
            return <WrapperComponent {...this.props} {...this.state.props}/>;
        }
    }
}

export class Provider extends Component {
    render () {
        return <ValueContext.Provider value={this.props.store}>
            {this.props.children}
        </ValueContext.Provider>;
    }
}

function bindActionCreators(creators, dispatch) {
    const obj = {}
    for(let prop in creators) {
        obj[prop] = bindActionCreator(creators[obj], dispatch)
    }
    return obj;
}
function bindActionCreator(creator, dispatch) {
    return (...args) => dispatch(creator(args))
}
```
# mobx
[官方文档](https://cn.mobx.js.org/)

先来看一下官方定义
- redux  **JavaScripty应用可预测的状态管理容器**
- mobx `简单可扩展的状态管理`

## 已有了redux为什么还有mobx？
- 在react生态中，redux可谓是状态管理中的霸主了，mobx则是一方诸侯。
- redux上手相对简单，而mobx，API较多，相对复杂一些。
- redux强调数据不可变，方便数据追溯，很容易实现时间旅行的功能；mobx中数据是可变的，然而时间回溯代价就很高。
- redux并知道state是否发生变化，dispatch的时候会更新所有的订阅者，你需要通过拆分store或使用shouldComponentUpdate周期进行优化
- mobx中的数据是响应式的，会进行依赖收集（与vue思想类似），知道要更新哪些内容，所以对于复杂应用，mobx不需要做过多处理就能达到很好的性能。

总结： 对于一般应用而言使用redux即可，对于复杂或性能要求较高的业务场景则使用mobx。

参考资料：[我为什么从redux迁移到了mobx](https://tech.youzan.com/mobx_vs_redux/)

## 使用案例
1. 接入准备
- `npx create-react-app  XXX`
- `cd XXX && npm i && npm eject`
- `npm i mobx mobx-react`
- 修改`package.json` babel增加plugins
```json
[
  "@babel/plugin-proposal-decorators",
  {
    "legacy": true
  }
]
```

2. 代码示例
- `App.js`
```jsx
import React from 'react';
import { makeObservable, observable, action } from 'mobx';
import { Observer } from 'mobx-react';
class App extends React.Component {
    constructor(props) {
        super(props);
        makeObservable(this);
    }
    @observable
    count = 0;

    @action
    add = () => {
        ++this.count;
    }
    render() {
        return <Observer>
            {
                () => <div>
                    <p>{this.count}</p>
                    <button onClick={this.add}>ADD</button>
                </div>
            }
        </Observer>
    }
}

export default App;
```

完整案例， [点击这里](https://github.com/guojingwen/frontend-project/tree/main/react_study/5.mobx)
								
# 聊一聊数据流管理方案
## 函数式 vs 面向对象
函数式的优势
- 纯函数无副作用，可时间回溯，适合并发
- 数据流变化处理很拿手，比如rxjs
- 对于复杂数据逻辑、科学计算的开发和维护效率更高

面向对象的优势
- javascript的鸭子类型，标明它基于对象，不适合完全函数式的表达
- 数学思维和数据处理适合函数式，技术是为业务服务的，而业务模型适合用面向对象。
- 业务开发和做研究不同，逻辑严谨的函数式相当完美，但别指望每个程序员都愿意消耗大量脑细胞解决日常业务问题。

## Redux vs Mobx
| Redux | Mobx |
| --- | --- |
| 数据流程很自然，需要依据对象引用是否变化来控制更新粒度。 | 数据流流动不自然，只有用到的数据才会引发绑定，局部精确更新，但免去了粒度控制烦恼。 |
| 如果充分利用时间回溯的特征，可以增强业务的可预测性与错误定位能力 | 时间回溯能力较为复杂 |
| 时间回溯代价很高，因为每次都要更新引用，除非增加代码复杂度，或使用 immutable。 | 自始至终一份引用，不需要 immutable，也没有复制对象的额外开销。 |
| 时间回溯的另一个代价是 action 与 reducer 完全脱节，数据流过程需要自行脑补。原因是可回溯必然不能保证引用关系。 | 数据流动由函数调用一气呵成，便于调试。 |
| 引入中间件，其实主要为了解决异步带来的副作用，业务逻辑或多或少参杂着 magic。 | 业务开发不是脑力活，而是体力活，少一些 magic，多一些效率。 |
| 但是灵活利用中间件，可以通过约定完成许多复杂的工作。 | 由于没有 magic，所以没有中间件机制，没法通过 magic 加快工作效率（这里 magic 是指 action 分发到 reducer 的过程）。 |
| 对 typescript 支持困难。 | 完美支持 typescript。 |

React状态管理

React快上车

挤出一点时间把之前研究视频压缩的资料粘贴出来， 主要是`FFmpeg`这个工具用途太广太实用了。视频压缩、转换、剪裁、提取音频、`GIF`制作等。我这段时间写博客`GIF`图制作都是用它，本文将以示例的形式讲解`FFmpeg`的使用技巧



# 介绍

[官网](https://ffmpeg.org/)<br />
为什么说FFmpeg是最强的的音视频处理工具？<br />
因为它可以实现几乎所有你想要的功能
- 添加水印 
- 路径
- 剪裁、拼接
- 视频缩略图
- 转码、格式转换
- 压缩
- GIF动图
- 声音处理
- 录屏
- 。。。

**它是一个命令行工具 全平台通用，你可以写脚本进行批处理等等**。<br />
其实相当多的视频工具、平台、播放都用到了`FFmpeg`或着它的核心库

# 剪切
- `ffmpeg -i test.avi -c:v libx264 -ss 00:00:03 -t 00:00:05 out.mp4`
- 从第三秒开始剪切，长度5秒
- `-ss` 指定其实位置 后面是 `时：分：秒`  
- `-t`	可以是个整数，以秒为单位，也可以是`时：分：秒`
- `-ss`要放在 `-i` 参数后面，这样才能做到分毫不差的剪切
- 也可以使用 `-to` 代替 `-t` 指定一个片段的终止位置
- `-c copy`：直接复制，不经过重新编码（这样比较快）
> 注更多关于 `-c` 参数后面说


#  合并
需要将要合并的文件列举到txt文件中
- `mylist.txt`
```txt
file 'clip1.mp4'
file 'clip2.mp4'
file 'clip3.mp4'
```
`ffmpeg -f concat -i mylist.txt -c copy output.mp4`

# 修改音频
`-af`
`ffmpeg -i test.mp4 -af "volume=1.5" output.mp4`  

- `"volume=1.5"` 音量放大50%
- `"loudnorm=I=-5:LRA=1"` 统一视频的音量
- `"equalizer=f=1000:width_type=h:width=200:g-10"` 添加高通、低通滤波器、甚至均衡器等等
- `-an` 删除音频轨  无声视频
- `-vn` 删除视频轨
- `-sn` 删除字幕
- `-dn` 删除视频流


# 转换音频 
`ffmpeg -i sound.wav sound.mp3`

# 提取视频缩略图
`ffmpeg -i test.mp4 -vf "fps=1/10,scale=-2:720" thumbnail-%03d.jpg`
- `thumbnail-%03d.jpg`   --->  `thumbnail-001.jpg`  `thumbnail-002.jpg`  `......`
- `fps` 表示视频帧率 1/10表示每10秒输出一帧画面 
- `scale`指定输出图像大小

# 给视频添加水印
`ffmpeg -i test.mp4 -i cat.jpg -fitter_complex "overlay:=100:100" output.mp4`
- `overlay`用于将水印叠加在原始视频的上方，后面的两个参数指定了在图像中的位置

# GIF动图的制作
需要指定视频片段<br>
`ffmpeg -i scrollbar.mov -ss 00:00:01 -t 5  -vf "fps=10,scale=480:-1:flags=lanczos" scrollbar.gif`
   - `-i`输入文件 结尾输出文件
   - `-ss 00:00:01 -t 5` 开始时间持续时长
   - `fps=10`每秒渲染10帧 
   - `scale=480:-1`缩放视频宽度为 480
   - `flags=lanczos`指定使用Lanczos算法进行缩放，Lanczos是一种高质量的缩放算法，用于保持图像细节的清晰度。

GIF转Webp
`ffmpeg -i heap.gif  heap.webp`

# 视频压缩

## 视频压缩原理

关于视频压缩主要从三个方面着手
1. 调整视频编码格式，使用更高的压缩算法
2. 降低分辨率和帧数
3. 降低码率

关于码率你可能比较萌，更多建议了解一下[视频格式压缩](https://blog.warmplace.cn:11443/post/53)

## 案例
案例1： <br>
`ffmpeg -i  人性与管理中.mp4  -c:v libx264 -crf 32 2.人性与管理.mp4`
![image.png](https://blog.warmplace.cn:11443/static/img/b6c134abbb4d0bd7df0c070aeaff6f40.image.webp)

参数讲解
- `-i` 			输入文件
- `-c:v libx264`	指定编码为 H264
- `-crf [number]`	控制图像质量；取值范围 0 - 51，值越大代表图像质量越差，0为无损压缩； 实际常用的取值为 19-28
- `-preset` 指定编码器  默认是 `medium` ，上述案例就是用的normal, 有 fast/slow 等等，越快质量越大 越慢质量越小

案例2： <br>
`ffmpeg -i 24.mov -ss 00:00:00 -vf "fps=10,scale=1024:-1:flags=lanczos" 24.gif`

补充参数讲解
-  `--ss` 开始时间 可省略表示 从视频开始
-  `-t`  结束时间 可以是 秒（数字）也可以是`时：分：秒`， 省略表示视频结束
-  `fps=10` 一秒内有10帧画面，
-  `scale=1024:-1` 缩放为宽度1024，高度自适应
-  `flags=lanczos` 指定使用 `Lanczos` 算法

# API不完全笔记

## 指定编码器 -c：
- `-c:v`：指定视频编码器
- `-c:a`：指定音频编码器
- `-i`：指定输入文件
- `-an`：去除音频流
- `-vn`： 去除视频流
- `-preset`：指定输出的视频质量，会影响文件的生成速度
- `-y`：不经过确认，输出时直接覆盖同名文件。

## 指定编码（压缩）
- `-preset`参数`ffmpeg -i test.avi -c:v libx264 -preset xxx out.mp4`
- xxx取值如下
- `ultrafast`  拥有最快的编码速度 但同时会产生一个较大的文件
- `superfast`
- `veryfast`
- `faster`
- `fast`
- `medium` 默认
- `slow`
- `slower`
- `veryslow`	虽然速度很慢，但生成的文件较小


## 压缩图像质量
- `-crf`参数 （constant rate factor） 他是用来控制图像质量的
- `ffmpeg -i test.avi -c:v libx264 -crf number　out.mp4`
- `number` 取值范围 0 - 51
- 这个值越大代表图像质量越差  0无损压缩 51最差质量
- 实际使用中最长用到的是 19-28
![image.png](https://blog.warmplace.cn:11443/static/img/fd1ca2b2115e44b7bf2d10448e96be87.image.webp)

##  指定过滤器`-vf`

- 修改尺寸 旋转 增加滤镜等等，可以指定一系列的过滤器
- ![image.png](https://blog.warmplace.cn:11443/static/img/e7be26b47b73001c0992f402aaa82c52.image.webp)
- `-vf "scale=1024:576"` 缩放为宽度1024，像素高度576像素
- `-vf "scale=1024:-1"`  缩放为宽度1024，高度自适应
- `-vf "scale=-1:720p"`	将视频转换为 720p
- 旋转视频可以使用另一个过滤器 `transpose=number`
- `number`取值 `0`-`7` 
   - `1` 顺时针旋转90度
   - `2` 逆时针旋转90度
- 当然不同的过滤器可以相互组合，比如先缩放再旋转  `-vf "scale=256:256,transpose=1"`
- 裁剪视频中的某一块区域 `-vf "crop=w:h:x:y"` 四个数字分别代表宽、高、左上角x y坐标
- 也可以是表达式 `-vf "crop=iw/3:ih/3"` 转换为1/3原始视频的宽度和高度, `iw` 是 `input width`的缩写, `ih`你懂的