Auto Commit

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+ <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>
+    <img v-if="interceptimg" :src="interceptimg" :preview-src-list="[interceptimg]"/>
+  </div>
 </template>
-
-<style scoped>
-header {
-  line-height: 1.5;
+<script setup lang="ts">
+//导入方法
+import { preview, intercpt } from '../src/uitls/preview'
+import { ref } from 'vue';
+//使用之前导入上述方法
+const showVideo = ref(false)
+// const showImg=ref(false)
+// 本地渲染
+async function loadFile(e: any) {
+  const objres = await preview(e)
+  console.log(objres);
+  const output = document.querySelector("#file") as HTMLVideoElement
+  showVideo.value = true;
+  output.src = objres
+  // output.setAttribute('src', objres)
 }
+// 截取第一帧
+const interceptimg = ref()
+async function intercept() {
+  const file = document.getElementById('file') as HTMLVideoElement;
+  const res = await intercpt(file)
+  interceptimg.value = res
 
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
 }
-</style>
+</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]));
+
+}
+
+/**
+ 
+ * 截取本地视频第一帧
+ 
+ * 需要传入本地视频播放的video
+ 
+ * @intercpt
+ 
+*/
+
+//calssname==是渲染视频的video的id
+
+function intercpt(calssname: HTMLElement) {
+
+    const canvas: any = document.createElement('canvas')
+
+    const ratio = calssname.offsetHeight / 9 / 16
+
+    canvas.width = Math.ceil(calssname.offsetHeight / 9) * 16
+
+    canvas.height = calssname.offsetHeight
+
+    canvas.getContext('2d').drawImage(calssname, 0, 0, canvas.width, canvas.height)
+
+    return canvas.toDataURL('image/png', 1.0)
+
+}
+export {preview ,intercpt}
\ No newline at end of file