需求背景

如下图，使用 uni-app 做 app 时，要上传图片和视频，这里选择图片和视频分别使用的 uni.chooseImage 和 uni.chooseVideo，上传使用的 uni.uploadFile，问题就是这些 API 还有上传成功后服务器返回内容中都没有提供视频封面图，于是只能使用一个固定的图片来充当视频封面，但是这样用户体验很不好

解决思路

在获取到视频链接后，如果我们可以让视频在后台自动播放，出现第一帧画面后再将它给停掉，在这个过程中利用 canvas 截取到视频播放的第一帧画面保存起来，那不就可以作为视频封面了吗？没那么容易，平时在 H5 环境中，到目前为止就行了，但问题是，现在我这里是 App，然后 uni-app 自带的 video 组件没法截取画面，而 App 环境又没法用 H5 环境的 video 标签，它甚至没有 document 对象， 技术框架上不兼容， 那怎么办？

这时候就需要用到 renderjs 了，毕竟它的核心作用之一就是 “在视图层操作dom，运行 for web 的 js库”。

那思路就有了，在 renderjs 模块中监听原始模块中的文件列表，当更改时（新增、删除），在 renderjs 中动态创建 video 元素，让它自动静音播放，使用 canvas 截取第一帧画面后销毁 video 元素并将图片传递给原始模块，原始模块将其设置为对应视频的封面

代码逻辑

<template>
<view :prop="canvasList" :change:prop="canvas.getVideoCanvas">
<view v-for="(item,index) in fileList" :key="index">
<image v-if="item.type===0" :src="item.url" @click="previewImage(item.url)">image>
<view v-else @click="previewVideoSrc = item.url">

<image mode="widthFix" :src="item.cover">image>

<u-icon class="play-icon" name="play-right-fill" size="30" color="#fff">u-icon>
view>
view>
<view class="preview-full" v-if="previewVideoSrc!=''">
<video :autoplay="true" :src="previewVideoSrc" :show-fullscreen-btn="false">
<cover-view class="preview-full-close" @click="previewVideoSrc=''"> ×
cover-view>
video>
view>
view>
template>

<script>
import { deepClone } from '@/utils'
// 原始模块
export default {
data() {
return {
previewVideoSrc: '', // 预览视频url
fileList: [

        { url: '', type: 0 },

        { url: '', type: 1 },

        { url: '', type: 1 },

      ] // 真正用来展示和传递的文件列表,type: 0代表图片，1代表视频

    }

  },
computed: {
// 用于 renderjs 模块监听，不用 fileList 是因为后续还有更改它（为其内部元素添加 cover ）属性
// 监听 fileList 然后又更改它会导致循环递归，这里使用 deepClone 也是为了让 canvasList 不与
// fileList 产生关联
canvasList() {
return deepClone(this.fileList)

    }

  },
methods: {
// 预览图片
previewImage(url) {

      uni.previewImage({
urls: [url]

      });

    },
// 生成视频封面
getVideoPoster({ index, cover }) {
this.$set(this.fileList[index], 'cover', cover)

    },

  }

}
script>
<script module="canvas" lang="renderjs">
// renderjs 模块
export default {
methods: {
getVideoCanvas(nV, oV, ownerInstance) {
if(oV !== undefined && Array.isArray(nV) && nV.length > 0) {

        nV.forEach((item, index) => {
// 如果是视频
if(item.type == 1) {
// 防止一次性执行过多逻辑导致卡顿
setTimeout(() => {
// 创建video标签
let video = document.createElement("video")
// 设置为自动播放和静音

              video.setAttribute('autoplay', 'autoplay')	

              video.setAttribute('muted', 'muted')
// 设置播放源

              video.innerHTML = ''
// 创建 canvas 元素和 2d 画布
let canvas = document.createElement('canvas')
let ctx = canvas.getContext('2d')
// 监听 video 的 canplay 事件

              video.addEventListener('canplay', function () {
// 设置宽高
let anw = document.createAttribute("width");

                  anw.nodeValue = 80;
let anh = document.createAttribute("height");

                  anh.nodeValue = 80;

                  canvas.setAttributeNode(anw);

                  canvas.setAttributeNode(anh);
// 画布渲染

                  ctx.drawImage(video, 0, 0, 80, 80);
// 生成 base64 图片
let base64 = canvas.toDataURL('image/png')
// 暂停并销毁 video 元素

                  video.pause()

                  video.remove();
// 传递数据给逻辑层

                  ownerInstance.callMethod('getVideoPoster', {

                      index,
cover: base64

                  })

              }, false)

            }, index * 120)

          }

        })

      }

    }

  }

}
script>

成果展示

还有另一个地方，之前就是这样的，都是用的默认图片当作封面：

经过处理后就是这样啦：