Auto Commit

src/App.vue

@@ -3,19 +3,24 @@
     <input type="file" accept="video/*,image/*" @change="loadFile">
     <video id="file" width="480" height="270" v-show="showVideo" controls muted autoplay />
     <button v-show="showVideo" @click="intercept">截取</button>
+    <input type="text" v-model="inputvalue" placeholder="请输入你要截取第几帧" >
+    <button v-show="showVideo" @click="intercepts">特定帧率</button>
     <img v-if="interceptimg" :src="interceptimg" :preview-src-list="[interceptimg]"/>
   </div>
 </template>
 <script setup lang="ts">
 //导入方法
-import { preview, intercpt } from '../src/uitls/preview'
+import { preview, intercpt ,ramerate,convert} from '../src/uitls/preview'
 import { ref } from 'vue';
 //使用之前导入上述方法
 const showVideo = ref(false)
 // const showImg=ref(false)
 // 本地渲染
+const inputvalue=ref('')
+const objfile=ref()
 async function loadFile(e: any) {
   const objres = await preview(e)
+  objfile.value=objres
   console.log(objres);
   const output = document.querySelector("#file") as HTMLVideoElement
   showVideo.value = true;
@@ -28,7 +33,8 @@ async function intercept() {
   const file = document.getElementById('file') as HTMLVideoElement;
   const res = await intercpt(file)
   interceptimg.value = res
-
-
+}
+async function intercepts(){
+  interceptimg.value = await ramerate( objfile.value, '320', '180')
 }
 </script>
\ No newline at end of file

src/uitls/preview.ts

@@ -82,4 +82,4 @@ function convert(url: any, name: string) {
     return new File([u8arr], name || 'png', { type: mime })
 }
 
-export {preview ,intercpt}
+export {preview ,intercpt,convert,ramerate}
\ No newline at end of file