From 7a4c1907527d602882b70a3c5479da11b05e6fdd Mon Sep 17 00:00:00 2001
From: qq_59556663 <qq_59556663@devide>
Date: Mon, 23 Oct 2023 17:00:00 +0800
Subject: [PATCH] Mon Oct 23 17:00:00 CST 2023 inscode

---
 src/App.vue          | 34 ++++++++++++++++++++++++----------
 src/uitls/preview.ts | 10 +++++-----
 2 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 26ec4ac..2dd63e0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,15 +1,17 @@
 <template>
- <div style="margin: auto;">
-    <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>
+    <div style="margin: auto;">
+        <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>
+          <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
diff --git a/src/uitls/preview.ts b/src/uitls/preview.ts
index be9189d..9f9c0e5 100644
--- a/src/uitls/preview.ts
+++ b/src/uitls/preview.ts
@@ -1,11 +1,11 @@
 //获取本地图片/视频链接
 
 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
-- 
GitLab