uniapp截取视频画面帧

前言

最近开发中遇到这么一个需求，上传视频文件的时候需要截取视频的一部分画面来供选择，作为视频的封面，截取画面可以使用canvas来实现，将视频画面画进canvas里，再通过canvas来生成文件对象和一个预览的url

逻辑层和视图层

想要将视频画进canvas里就需要操作dom，但是在uniapp中我们是无法操作dom的，uniapp的app端逻辑层和视图层是分离的，renderjs运行的层叫【视图层】，uniapp原生script叫【逻辑层】，会产生一个副作用就是是在造成了两层之间通信阻塞

所以uniapp推出了renderjs，renderjs是一个运行在视图层的js，可以让我们在视图层操作dom，但是不能直接调用，需要在dom元素中绑定某个值，当值发生改变就会触发视图层的事件

// 视图层
// module为renderjs模块的名称，通过 模块名.事件 来调用事件
<script module="capture" lang="renderjs"></script>

// 逻辑层
// prop为绑定的值，名字可以随便起，但是要和change后面一致
// 当prop绑定的值发生改变就会触发capture模块的captures事件
<view style="display: none;" :prop="tempFilePath" :change:prop="capture.captures"></view>

<template>
    <view class="container">
        <view style="display: none;" :prop="tempFilePath" :change:prop="capture.captures"></view>
    </view>
</template>

<script>
    export default {
   
   
        data() {
   
   
            return {
   
   
                tempFilePath: ''
            }
        },