# 基于WebGL的视频裁切处理器

这是一个基于WebGL的视频裁切处理器，支持多种裁切类型。您可以通过传入不同的配置数组来实现不同的视频裁切效果。

## 使用说明

1. 创建一个`VideoProcessor`实例，并传入适当的配置数组。
2. 调用`initializeById`方法，传入源canvas的ID和目标canvas ID数组。这会初始化源和目标canvas，并将源canvas内容处理后绘制到目标canvas。
3. 在需要更新帧时（例如，源视频播放新的一帧时），调用`drawFrame`方法。这会将当前源canvas中的帧复制并按照给定配置处理，然后绘制到目标canvas。

### 示例代码

```javascript
const configs = [
  { type: 'none', x: 0, y: 0, w: 1, h: 1 },
  { type: "scaleOnly", x: 2/3, y: 0.0, w: 1/3, h: 4/9 },
  { type: "threePart", x: 0.0, y: 22/27, w: 1, h: 4/27 },
];
const videoProcessor = new VideoProcessor(configs);
videoProcessor.initializeById("video1", ["camera1", "camera2", "camera3"]);

// 每当源视频播放新的一帧时执行以下操作
videoProcessor.drawFrame();
```

## 配置参数说明
 
 - `type`: 裁切类型，默认值为"none"。
 - `x`: 裁切区域的起始横坐标百分比（左上角），范围介于0到1之间，默认值为0。
 - `y`: 裁切区域的起始纵坐标百分比（左上角），范围介于0到1之间，默认值为0。
 - `w`: 裁切区域的宽度百分比，范围介于0到1之间，默认值为1。
 - `h`: 裁切区域的高度百分比，范围介于0到1之间，默认值为1。

### 类型

支持以下裁切类型：

 - `none`: 无裁切，原样显示。
 - `scaleOnly`: 缩放裁切，仅裁切选定区域并缩放至目标canvas。
 - `threePart`: 三部分裁切，分别裁切出3部分源视频，并缩放至目标canvas。