emacroh5lib 1.0.37 → 1.0.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.37",
+  "version": "1.0.40",
   "description": "EMacro前端组件库",
   "main": "dist/emacroh5lib.min.js",
   "scripts": {

package/src/index.ts

@@ -4,11 +4,12 @@ import { EMacro } from "./utilities/File";
 
 import FileViewer from './views/FileViewer/index.vue'
 import ImageViewer from './views/ImageViewer/index.vue'
+import VideoViewer from './views/VideoViewer/index.vue'
 import DragResizeView from './views/DragResizeView/index.vue'
 import DragView from './views/Draw/index.vue'
 import MessageBoxTest from "@/components/MessageBoxTest";
 
-const components = [FileViewer, ImageViewer, DragResizeView];
+const components = [FileViewer, ImageViewer, VideoViewer, DragResizeView];
 
 const install = (Vue: any) => {
   if ((install as any).installed) return;
@@ -23,12 +24,12 @@ if (typeof window !== 'undefined' && (window as any).Vue) {
   install((window as any).Vue);
 }
 
- 
+
 // import HelloWorld from "@/components/HelloWorld.vue";
 // import HelloWorld from "@/components/index";
 
- 
+
 
 
 export default {}
-export { EMacro,FileViewer, ImageViewer, DragResizeView }
+export { EMacro, FileViewer, ImageViewer, VideoViewer, DragResizeView }

package/src/utilities/File.ts

@@ -154,6 +154,93 @@ export namespace EMacro {
         }
     }
 
+    // 获取最大公约数
+    function getGcd(a, b) {
+        let n1, n2;
+        if (a > b) {
+            n1 = a;
+            n2 = b;
+        } else {
+            n1 = b;
+            n2 = a;
+        }
+
+        let remainder = n1 % n2;
+        if (remainder === 0) {
+            return n2;
+        } else {
+            return getGcd(n2, remainder)
+        }
+    }
+
+    export const getVideoScale = async (url: string) => {
+        const video = document.createElement('video');
+        video.setAttribute("width", "10");
+        video.setAttribute("height", "10");
+        video.setAttribute("style", "position: absolute;opacity: 0;z-index: -5;top: 0;");
+        video.setAttribute("src", url);
+
+        document.body.appendChild(video);
+
+        const p = new Promise(function (resolve, reject) {
+            video.addEventListener('canplay', function (e: any) {
+                const gcd = getGcd(e.target.videoWidth, e.target.videoHeight);
+                resolve([e.target.videoWidth / gcd, e.target.videoHeight / gcd])
+            })
+        })
+        const res = await p;
+        document.body.removeChild(video);
+        return res
+    }
+
+    export const getVideoBase64 = async (url: string, timestamp: number = -1, bufftime: number = 2000) => {
+
+        const scale = await getVideoScale(url) as any;
+        const width = scale[0] + ''
+        const height = scale[1] + ''
+        const base64 = await new Promise(function (resolve) {
+            let dataURL = ''
+            let video = document.createElement('video')
+            video.setAttribute('crossOrigin', 'anonymous') //处理跨域
+            video.setAttribute('src', url)
+            video.setAttribute('width', width)
+            video.setAttribute('height', height)
+            video.setAttribute('autoplay', 'autoplay')
+            document.body.appendChild(video)
+            video.addEventListener('loadeddata', function () {
+
+                video.pause()
+
+                if (timestamp === -1) {
+                    timestamp = Math.random() * video.duration
+                }
+                video.currentTime = timestamp
+
+                /*  
+                使用定时器为了视频跳转到某一帧的时候视频进行缓冲,等视频加载完成之后进行截图
+                如果截图是黑屏说明视频未加载完成就开始截屏了
+            */
+                setTimeout(() => {
+                    let canvas = document.createElement('canvas');
+                    // const width = canvas.width; //canvas的尺寸和图片一样
+                    // const height = canvas.height;
+                    canvas.width = video.width
+                    canvas.height = video.height
+                    canvas.getContext('2d')!.drawImage(video, 0, 0, video.width, video.height) //绘制canvas
+                    dataURL = canvas.toDataURL('image/jpeg') //转换为base64
+                    document.body.removeChild(video)
+                    resolve(dataURL)
+                }, bufftime);
+
+            })
+        })
+
+        return base64;
+    }
+
+
+
+
 }
 
 

package/src/views/ImageViewer/index.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
         <div class="duo-viewer-mask">
-            <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image" />
+            <img ref="duoViewerImage" :src="realSrc" :alt="alt" class="duo-viewer-mask__image"/>
         </div>
         <div class="duo-viewer-footer">
             <div class="duo-viewer-footer__title">{{ realName }}</div>
@@ -177,7 +177,6 @@
                     // $this.setStyleByName($this.image, "height", height);
 
                     $this.image = $this.$refs["duoViewerImage"];
-                    console.log("Promise.all", $this.image);
                     $this.initDrag();
                     this.$emit("loadComplete");
                     const { width, height } = $this.listDataCache[index];
@@ -187,7 +186,6 @@
 
                 Promise.race(promises).then((data) => {
                     $this.image = $this.$refs["duoViewerImage"];
-                    console.log("Promise.race", $this.image);
                     $this.initDrag();
                     this.$emit("loadComplete");
                     const { width, height } = $this.listDataCache[index];
@@ -359,9 +357,9 @@
 
             // Zoom action
             zoom(type) {
-                let image = this.image,
-                    w = +this.getStyleByName(image, "width").split("px")[0],
-                    h = +this.getStyleByName(image, "height").split("px")[0];
+                let image = this.image;
+                let w = +this.getStyleByName(image, "width").split("px")[0];
+                let h = +this.getStyleByName(image, "height").split("px")[0];
 
                 if (h <= 20 && type === "out") return;
 

package/src/views/TestView/index.vue

@@ -10,8 +10,9 @@
       :currentIndex="currentIndex" />
 
 
-    <div class="list" id="list">
 
+
+    <div class="list" id="list" v-if="false">
       <DragResizeView v-for="(rect, index) in rects" :key="index" :isStorage="true" :name="rect.name" :w="rect.width"
         :h="rect.height" :x="rect.left" :y="rect.top" :parentW="listWidth" :parentH="listHeight" :axis="rect.axis"
         :isActive="rect.active" :minw="rect.minw" :minh="rect.minh" :isDraggable="rect.draggable"
@@ -21,13 +22,14 @@
         v-on:resizing="changeSize($event, index)">
         <div class="filler" :style="{ backgroundColor: rect.color }"></div>
       </DragResizeView>
-
     </div>
 
-    <Draw>
+    <Draw v-if="false">
       <div class="filler2">111</div>
     </Draw>
 
+    <video-viewer :list="srcList" :show.sync="showVideoViewer" width="80%" height="80%"/>
+
 
   </div>
 </template>
@@ -35,6 +37,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import ImageViewer from "@/views/ImageViewer/index.vue";
+import VideoViewer from "@/views/VideoViewer/index.vue";
 import DragResizeView from "@/views/DragResizeView/index.vue";
 import Draw from "@/views/Draw/index.vue";
 
@@ -47,12 +50,14 @@ import Cookie from 'js-cookie'
 import LAY_EXCEL from 'lay-excel';
 
 import BMF from 'browser-md5-file';
+import { info } from "console";
 
 
 @Component({
   components: {
     ImageViewer,
     DragResizeView,
+    VideoViewer,
     Draw
   },
   mounted() {
@@ -69,15 +74,23 @@ export default class TestView extends Vue {
     // "https://scpic.chinaz.net/files/pic/pic9/202109/bpic24244.jpg",
     // "https://scpic.chinaz.net/files/pic/pic9/202110/hpic4529.jpg",
     // "https://scpic.chinaz.net/files/pic/pic9/201912/zzpic22106.jpg",
-    "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
+    // "https://scpic.chinaz.net/files/pic/pic9/202202/apic38580.jpg",
+    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4",
+    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\ker.mp4",
+    "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\video2.mp4",
   ] // 图片查看器数据集
+
+  public src: String = "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4"
+
   public showViewer: Boolean = false // 是否打开图片查看器
+  public showVideoViewer: Boolean = false // 是否打开图片查看器
 
   public listWidth = 0;
   public listHeight = 0;
 
   public handleOpen() {
-    this.showViewer = true;
+    // this.showViewer = true;
+    this.showVideoViewer = true;
   }
   public openCallback() { } // 打开时的回调
   public closeCallback() { } // 关闭时的回调
@@ -208,7 +221,7 @@ export default class TestView extends Vue {
   }
 
   public selectFile(e) {
- 
+
     EMacro.File.selectFile().then((files) => {
       EMacro.File.uploadFiles(files, file => {
 
@@ -285,6 +298,13 @@ export default class TestView extends Vue {
   }
 
   public mounted() {
+
+    EMacro.getVideoScale("http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\编程向未来.mp4").then(info => {
+      console.log("获取视频", info);
+    });
+
+
+
     const listEl = document.getElementById('list') as HTMLElement;
     this.listWidth = listEl.clientWidth;
     this.listHeight = listEl.clientHeight;