Mon Oct 23 17:00:00 CST 2023 inscode

src/App.vue

 <template>
     <div style="margin: auto;">
-    <input type="file" accept="video/*,image/*" @change="loadFile">
+        <input type="file" accept="video/*" @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]"/>
+        <input type="text" v-model="inputvalue" placeholder="请输入你要截取第几帧" >
+        <button @click="intercepts">截取特定帧率</button>
+      
+        <img v-if="interceptimgs" :src="interceptimgs" :preview-src-list="[interceptimgs]"/>
     </div>
 </template>
 <script setup lang="ts">
-//导入方法
+    //导入方法
 import { preview, intercpt ,ramerate,convert} from '../src/uitls/preview'
 import { ref } from 'vue';
 //使用之前导入上述方法
@@ -34,7 +36,19 @@ async function intercept() {
   const res = await intercpt(file)
   interceptimg.value = res
 }
+const interceptimgs=ref()
 async function intercepts(){
-  interceptimg.value = await ramerate( objfile.value, '320', '180')
+     console.log(objfile.value,'objfile.value')
+    const res = await ramerate(objfile.value, '320', '180',inputvalue.value)
+        // console.log(res);
+     const res1 = await convert(res, '截取.png')
+     console.log(res1,'res1')
+    const reader: any = new FileReader();
+    //如果是SSR渲染需要加上如下判断（比如nuxt）
+    // if(!process.browser)return
+    reader.onload =async function () {
+        interceptimgs.value = URL.createObjectURL(new Blob([reader.result]))
+    }
+    reader.readAsArrayBuffer(res1)
 }
 </script>
\ No newline at end of file

src/uitls/preview.ts

 //获取本地图片/视频链接
 
 async function preview(e: any) {
-
     const buffer = await e.target.files[0].arrayBuffer();
  
     return URL.createObjectURL(new Blob([buffer]));
 
+
 }
 
 /**
@@ -39,10 +39,10 @@ function intercpt(calssname: HTMLElement) {
  * 截取本地视频某一帧
  * @ramerate
 */
-function ramerate(url: string, width: string, height: string) {
+function ramerate(url: string, width: string, height: string,mun:number) {
     return new Promise(function (resolve, reject) {
         const video = document.createElement('video')
-        video.currentTime = 8 // 指定帧数
+        video.currentTime =mun|| 8 // 指定帧数
         video.setAttribute('mut', 'true')
         video.setAttribute('crossOrigin', 'anonymous') // 处理跨域
         video.setAttribute('crossOrigin', 'anonymous') // 处理跨域
@@ -82,4 +82,4 @@ function convert(url: any, name: string) {
     return new File([u8arr], name || 'png', { type: mime })
 }
 
-export {preview ,intercpt,convert,ramerate}
\ No newline at end of file
+export { preview, intercpt, convert, ramerate }
\ No newline at end of file