视频转gif需求全流程分析✨

1. 背景

基本需求是这样的，在一个固定宽高的视频播放器中截取一块区域，选择视频的开始和结束位置，设置帧率、速度、预览等信息转成GIF。

2.分析

首先我们先确定是前端转gif还是后端转，然后具体问题具体分析，我们采用的是后端转gif，需要传给后端视频源、截取的开始，结束时间、缩放后的x，y值、截取框的宽高、帧率、速度等信息。

分析难点！

传参最复杂的就是计算比例，视频源可能是1080也可能720等等视频原始尺寸，放到视频播放器中会按照长或宽等比缩放。宽高比不同的话，如果是竖屏视频会有左右黑边，横屏会有上下黑边。所以要算出蒙版层mask的缩放比例，才能拿到真实的x，y值
视频截取框需要能拖拽，截选区域为透明色，四周为黑灰色，可截选区域为去除左右黑边或者上下黑边后的真实播放区域

设计效果比如这是左右黑边，还有横屏的上线黑边

3.实现

难点一，通过分析宽高比，播放器宽度/视频宽度 = 缩放比，用这个缩放比乘原视频高度，如果小于播放器高度则是上下留有黑边，反之则是左右有黑边，等比的话就是刚好与播放器比例一致。算出的缩放比例ratio，再把这个比例用于蒙版层mask。

3.1难点一核心代码

<my-video-player>...播放器代码省略</my-video-player>
<div class="mask">
  ...拖拽代码
</div>

// 860 490是播放器宽高
let l = document.getElementsByClassName('mask')[0] // 蒙版层，放在视频播放器上
let ratio = 860 / this.originalWidth  // originalWidth 原视频宽度  originalHeight 原视频高度
l.style.transformOrigin = '0 0'
if (ratio * this.originalHeight < 490) { // 上下黑边
    this.radio = 860 / this.originalWidth
} else if (ratio * this.originalHeight > 490) { // 上下左右
    this.radio = 490 / this.originalHeight
} else { // 等比
    this.radio = 490 / this.originalHeight
}
l.style.transform = `scale(${this.radio})` // 缩放比

3.1难点二核心代码

这里用了vue-draggable-resizable包来实现可拖拽框，在难点一中我们拿到了radio，接下来计算拖拽框的可移动区域，以及初始值

let initXY = this.calculateCanvasImageParam(this.originalWidth, this.originalHeight)
calculateCanvasImageParam(videoWidth, videoHeight) {
  let height = 490
  let width = 860
  if (videoWidth === 0 || videoHeight === 0) {
    return {
      x: 0,
      y: 0,
      width: width,
      height: height
    }
  }
  // 计算比例
  if (videoHeight / videoWidth > (height / width)) {
    const realW = height * videoWidth / videoHeight
    return {
      x: (width - realW) / 2,
      y: 0,
      width: realW,
      height: height
    }
  } else {
    const realH = width * videoHeight / videoWidth
    return {
      x: 0,
      y: (height - realH) / 2,
      width: width,
      height: realH
    }
  }
}

这样initXY这个对象里的，x、y就是传入vue-draggable-resizable组件的初始x、y值

<div class="mask">
  <vue-draggable-resizable
      :w="width"
      :h="height"
      :x="x"
      :y="y"
      @dragging="onDrag"
      @resizing="onResize"
      :parent="true"
      class="innerCheck"
      :scale='radio'>
  </vue-draggable-resizable>
</div>

接下来就是截图效果的实现，这里我们用了css属性mix-blend-mode，他是用来控制元素的混合模式，可以混合叠加产生不一样的效果，我们先来看看兼容性还不错，没多少用户还在用IE吧，贴代码：

.mask {
  position: absolute;
  opacity: .9;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  mix-blend-mode: hard-light;
  pointer-events: auto;

  .innerCheck {
    border: 3px solid #FC4F08;
    //top: 50px;
    //left: 50px;
    background-color: gray;

    .dingwei {
      ...
    }

    .dingwei2 {
      ...
    }

    .dingwei3 {
      ...
    }

    .dingwei4 {
      ...
    }
  }
}