emacroh5lib 1.0.36 → 1.0.39

package/package.json

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

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>
@@ -88,12 +88,6 @@
             alt: {
                 type: String,
                 default: "加载失败...",
-            },
-            loadComplete: {
-                type: Function,
-                default: function () {
-                    console.log("loadComplete");
-                }
             }
         },
         computed: {
@@ -161,12 +155,12 @@
                                     height: `${imageObject.height}px`,
                                 };
 
-                                resolve(event);
+                                resolve("");
                                 imageObject.onload = null
                             };
 
                             imageObject.onerror = function (event) {
-                                resolve(event);
+                                resolve("");
                                 imageObject.onerror = null
                             };
 
@@ -175,19 +169,25 @@
                     );
                 });
 
-                // Promise.all(promises).then((data) => {
-                //     this.image = this.$refs["duoViewerImage"];
-                //     this.initDrag();
-                //     const { width, height } = $this.listDataCache[index];
-                //     $this.setStyleByName($this.image, "width", width);
-                //     $this.setStyleByName($this.image, "height", height);
-                // })
+                Promise.all(promises).then((data) => {
+                    // this.image = this.$refs["duoViewerImage"];
+                    // this.initDrag();
+                    // const { width, height } = $this.listDataCache[index];
+                    // $this.setStyleByName($this.image, "width", width);
+                    // $this.setStyleByName($this.image, "height", height);
+
+                    $this.image = $this.$refs["duoViewerImage"];
+                    $this.initDrag();
+                    this.$emit("loadComplete");
+                    const { width, height } = $this.listDataCache[index];
+                    $this.setStyleByName($this.image, "width", width);
+                    $this.setStyleByName($this.image, "height", height);
+                })
 
                 Promise.race(promises).then((data) => {
                     $this.image = $this.$refs["duoViewerImage"];
-                    console.log("$this.image", $this.image);
                     $this.initDrag();
-                    $this.loadComplete()
+                    this.$emit("loadComplete");
                     const { width, height } = $this.listDataCache[index];
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
@@ -357,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() {
@@ -63,21 +68,29 @@ export default class TestView extends Vue {
 
   public currentIndex: Number = 0; // 打开图片查看器时，需要定位到的图片的索引
   public srcList: Array<String> = [
-    "http://172.16.1.83:18019/EMacroApi/GetFile?type=0&path=C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\%E6%97%A0%E6%A0%87%E9%A2%98.png",
-    "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
-    "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
-    "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",
+    // "http://172.16.1.83:18019/EMacroApi/GetFile?type=0&path=C:\\MES\\EMacroAndroidServer_Windows_v1.1\\EMacroAssets\\file\\%E6%97%A0%E6%A0%87%E9%A2%98.png",
+    // "https://scpic.chinaz.net/files/pic/pic9/202203/apic39703.jpg",
+    // "https://scpic.chinaz.net/files/pic/pic9/202005/zzpic24899.jpg",
+    // "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",
+    "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;