批量截取视频第一帧

批量截取后端接口返回视频地址数据的第一帧作为封面展示在列表

我使用的是vue2的Mixins所抽离由此实现共用

1：创建myMinxins共用的js组件（由于项目中多个地方需要使用）

2：第二步：创建函数 - 抽离第一帧代码（可直接复制该函数代码）

代码：

      getVideoBase64(url) {
            return new Promise(function (resolve, reject) {
              let dataURL = "";
              let video = document.createElement("video");
              video.setAttribute("crossOrigin", "anonymous"); //处理跨域
              video.setAttribute("src", url);
              video.setAttribute("width", 400);
              video.setAttribute("height", 240);
              video.setAttribute("preload", "auto");
              video.setAttribute('crossOrigin', 'anonymous');
              video.addEventListener("loadeddata", function () {
                let canvas = document.createElement("canvas"),
                  width = video.width, //canvas的尺寸和图片一样
                  height = video.height;
                canvas.width = width;
                canvas.height = height;
                canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
                dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
                resolve(dataURL);
              });
            })
          },

第三步：在需要的页面组件中引入并调用myMixins中的抽离第一帧函数getVideoBase64

（1）：引入

import { myMixins } from '../../utils/myMixins'

（2）：挂载

mixins: [myMixins],   //与生命周期 & data都是同级的位置

（3）：使用（调用myMixins中的抽离第一帧函数getVideoBase64）

例如：

        // res.data.currentClipList是一个数据 里面有多个对象数据
        res.data.currentClipList.forEach(item => {
          this.getVideoBase64(item.videoUrl).then((data) => {  //videoUrl视频key
            item.coverUrl = data  //coverUrl 图片key
          });
        });
        //处理完毕后将数据进行赋值渲染展示
        this.clipList = res.data.currentClipList;

到此封面图片就会实现完毕了，(小问题：数据较多时候偶尔某个封面会产生未抽离到 — 再次刷新就会发现抽离到了)

批量截取视频第一帧

猜你喜欢