emacroh5lib 1.0.38 → 1.0.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "emacroh5lib",
-  "version": "1.0.38",
+  "version": "1.0.41",
   "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

@@ -177,9 +177,8 @@
                     // $this.setStyleByName($this.image, "height", height);
 
                     $this.image = $this.$refs["duoViewerImage"];
-                    console.log("Promise.all", $this.image);
                     $this.initDrag();
-                    this.$emit("loadComplete");
+                    $this.$emit("loadComplete");
                     const { width, height } = $this.listDataCache[index];
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
@@ -187,12 +186,15 @@
 
                 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];
                     $this.setStyleByName($this.image, "width", width);
                     $this.setStyleByName($this.image, "height", height);
+
+                    setTimeout(() => {
+                        $this.resetZoom();
+                    }, 100);
                 })
 
             },
@@ -221,13 +223,26 @@
             },
 
             // Reset zoom action
-            resetZoom() {
+            resetZoom(adaptive = true) {
                 let image = this.image;
                 const imageObject = new Image();
 
                 imageObject.src = this.list[this.index];
 
-                const { width, height } = imageObject;
+                let { width, height } = imageObject;
+
+                if (adaptive) {
+                    let rate = 1
+                    if (width > height) {
+                        rate = width / document.body.clientWidth
+                    }
+                    else {
+                        rate = height / document.body.clientHeight
+                    }
+
+                    width = width / rate
+                    height = height / rate
+                }
 
                 this.setStyleByName(image, "width", `${width}px`);
                 this.setStyleByName(image, "height", `${height}px`);
@@ -312,11 +327,15 @@
                 }
                 this.judgeThumbnailListMove(lastIndex, this.index);
 
-                this.setStyleByName(this.image, "width", this.currentData.width);
-                this.setStyleByName(this.image, "height", this.currentData.height);
-                this.setStyleByName(this.image, "left", this.currentData.left);
-                this.setStyleByName(this.image, "top", this.currentData.top);
-                this.setTransform(this.image, this.currentData.transform);
+                setTimeout(() => {
+                    this.resetZoom();
+
+                    this.setStyleByName(this.image, "width", this.currentData.width);
+                    this.setStyleByName(this.image, "height", this.currentData.height);
+                    this.setStyleByName(this.image, "left", this.currentData.left);
+                    this.setStyleByName(this.image, "top", this.currentData.top);
+                    this.setTransform(this.image, this.currentData.transform);
+                }, 100);
             },
             // To judge thumbnail list move
             judgeThumbnailListMove(lastIndex, index) {
@@ -360,7 +379,6 @@
             // Zoom action
             zoom(type) {
                 let image = this.image;
-                console.log("zoom缩放", image);
                 let w = +this.getStyleByName(image, "width").split("px")[0];
                 let h = +this.getStyleByName(image, "height").split("px")[0];
 
@@ -527,7 +545,7 @@
                         this.zoom("out");
                         break;
                     case "one-to-one":
-                        this.resetZoom();
+                        this.resetZoom(false);
                         break;
                     case "prev":
                         this.switchAction("prev");

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,31 @@ 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",
+    "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
+    "http://121.228.113.68:8069/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\060 广西电子商务公共服务平台大数据中心.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",
+    // "http://192.168.0.107:99/H5/GetFile?type=0&path=C:\\SOP\\PCB001\\看板整体图.png",
   ] // 图片查看器数据集
+
+  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.showVideoViewer = true;
   }
   public openCallback() { } // 打开时的回调
   public closeCallback() { } // 关闭时的回调
@@ -208,7 +223,7 @@ export default class TestView extends Vue {
   }
 
   public selectFile(e) {
- 
+
     EMacro.File.selectFile().then((files) => {
       EMacro.File.uploadFiles(files, file => {
 
@@ -285,6 +300,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;