emacroh5lib 1.0.38 → 1.0.39

package/package.json

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

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;

package/src/views/VideoViewer/index.vue

@@ -0,0 +1,443 @@
+<template>
+    <div class="duo-viewer" v-if="show" ref="duoViewer" @click="clickAgent">
+        <div class="duo-viewer-mask">
+            <video :width="width" :height="height" :src="realSrc" type="video/mp4" class="duo-viewer-mask__image"
+                controls="controls" autoplay="autoplay" loop="loop">
+                您的浏览器不支持 HTML5 video 标签。
+            </video>
+        </div>
+        <div class="duo-viewer-footer" v-if="showThumbnail">
+            <div class="duo-viewer-footer__title">{{ realName }}</div>
+            <div class="duo-viewer-footer__toolbar">
+                <ul>
+                    <li class="duo-viewer-footer__zoom-in" data-viewer-action="zoom-in"></li>
+                    <li class="duo-viewer-footer__zoom-out" data-viewer-action="zoom-out"></li>
+                    <li class="duo-viewer-footer__one-to-one" data-viewer-action="one-to-one"></li>
+                    <li class="duo-viewer-footer__prev" data-viewer-action="prev"></li>
+
+                    <li class="duo-viewer-footer__play" data-viewer-action="play"></li>
+
+                    <li class="duo-viewer-footer__next" data-viewer-action="next"></li>
+                    <li class="duo-viewer-footer__reset" data-viewer-action="reset"></li>
+                    <li class="duo-viewer-footer__rotate-left" data-viewer-action="rotate-left"></li>
+                    <li class="duo-viewer-footer__rotate-right" data-viewer-action="rotate-right"></li>
+                </ul>
+            </div>
+            <div class="duo-viewer-footer__navbar">
+                <div class="duo-viewer-footer__navbar-thumbnail-wrap">
+                    <div ref="duoViewerImageThumbnailList" class="duo-viewer-footer__navbar-thumbnail-list"
+                        :style="{ width: `${listLength * 34}px` }">
+                        <div :key="item + i" v-for="(item, i) in list" :class="
+                  i === index
+                    ? 'duo-viewer-footer__navbar-thumbnail-item viewer-current'
+                    : 'duo-viewer-footer__navbar-thumbnail-item'
+                ">
+                            <img data-viewer-action="select" :data-viewer-action-index="i" :src="getVideoImg(item, i)"
+                                :alt="alt" class="duo-viewer-footer__navbar-thumbnail-image" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="duo-viewer-close" @click="handleClose">
+            <div class="duo-viewer-close__off"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+
+    import { EMacro } from "../../utilities/File";
+
+    export default {
+        name: "ImageViewer",
+        data() {
+            return {
+                viewerSrc: "",
+                image: null,
+                listDataCache: [],
+                index: 0,
+                imgUrl: "",
+                isCreatePoster: false
+            };
+        },
+        props: {
+            // Image src list
+            list: {
+                type: Array,
+                default: [],
+            },
+            // Control is show of viewer
+            show: {
+                type: Boolean,
+                default: false,
+            },
+            // Default index
+            currentIndex: {
+                type: Number,
+                default: 0,
+            },
+            name: {
+                type: [String, Array],
+                default: null,
+            },
+            width: {
+                type: String,
+                default: null,
+            },
+            height: {
+                type: String,
+                default: null,
+            },
+            imgList: {
+                type: [String, Array],
+                default: null,
+            },
+            showThumbnail: {
+                type: Boolean,
+                default: false,
+            }
+        },
+        computed: {
+            listLength() {
+                return this.list.length;
+            },
+            realSrc() {
+                if (this.width === null && this.height === null) {
+                    EMacro.getVideoScale(this.list[this.index]).then(info => {
+                        this.width = info[0]
+                        this.height = info[1]
+                    });
+                }
+                return this.list[this.index];
+            },
+            realName() {
+                if (this.name == null) {
+                    return this.list[this.index];
+                } else if (typeof this.name == "string") {
+                    return this.name
+                } else if (Array.isArray(this.name)) {
+                    return this.name[this.index];
+                } else {
+                    return "未命名"
+                }
+            },
+            currentData() {
+                return this.listDataCache[this.index];
+            },
+        },
+        watch: {
+            show(val) {
+                if (val) {
+
+                    if (this.imgList === null && this.showThumbnail) {
+                        this.imgList = new Array();
+                        this.isCreatePoster = true
+                    }
+                    for (let i = 0; i < this.list.length; i++) {
+                        this.createVideoImg(this.list[i], i);
+                    }
+                    this.$emit("open");
+                    this.index = this.currentIndex;
+                    this.init();
+                } else {
+                    this.$emit("close");
+                }
+            },
+        },
+        mounted() {
+
+        },
+        methods: {
+            getVideoImg(url, i) {
+
+                if (this.imgList !== null && typeof this.imgList == "string") {
+                    return this.imgList
+                } else if (this.imgList !== null && Array.isArray(this.imgList)) {
+                    return this.imgList[i]
+                } else {
+                    return ""
+                }
+            },
+            async createVideoImg(url, i) {
+                if (!this.isCreatePoster) {
+                    return
+                }
+                const base64 = await EMacro.getVideoBase64(url)
+                this.imgList.push(base64)
+            },
+            // Global init
+            init() {
+                //   this.initMouseWheel();
+                this.keydown();
+            },
+
+            // Reset Rotate
+            resetRotate() {
+                let image = this.image,
+                    oldTransform = this.getCurrentTransform(image);
+
+                oldTransform.rotate = `0deg`;
+
+                this.setTransform(image, oldTransform);
+            },
+
+            // Reset zoom action
+            resetZoom() {
+                let image = this.image;
+                const imageObject = new Image();
+
+                imageObject.src = this.list[this.index];
+
+                const { width, height } = imageObject;
+
+                this.setStyleByName(image, "width", `${width}px`);
+                this.setStyleByName(image, "height", `${height}px`);
+
+                this.listDataCache[this.index].width = `${width}px`;
+                this.listDataCache[this.index].height = `${height}px`;
+            },
+
+            // Reset all action
+            resetAll() {
+                this.resetZoom();
+                this.resetRotate();
+                this.resetPosition();
+                this.initListDataCache(this.index);
+            },
+
+            // Rotate action
+            rotate(type) {
+                let image = this.image,
+                    oldTransform = this.getCurrentTransform(image),
+                    oldRotate = Math.round(
+                        Math.atan2(+oldTransform.skewY, +oldTransform.scaleX) *
+                        (180 / Math.PI)
+                    ),
+                    changeValue = type === "left" ? -90 : 90,
+                    rotateValue = oldRotate + changeValue;
+
+                oldTransform.rotate = `${rotateValue}deg`;
+
+                oldTransform.translateX = `${oldTransform.translateX}px`;
+                oldTransform.translateY = `${oldTransform.translateY}px`;
+                this.currentData.transform = oldTransform;
+                this.setTransform(image, oldTransform);
+            },
+
+            // Get style by name
+            getStyleByName(obj, type) {
+                return window.getComputedStyle(obj, null)[type];
+            },
+
+            // Set style by name
+            setStyleByName(obj, key, value) {
+                obj && (obj.style[key] = value);
+            },
+
+            // Get element current transform
+            getCurrentTransform(obj) {
+                let value,
+                    transform = this.getStyleByName(obj, "transform");
+
+                if (transform === "none") return;
+
+                value = transform.split("(")[1].split(")")[0].split(",");
+
+                return {
+                    scaleX: value[0].trim(),
+                    skewY: value[1].trim(),
+                    // skewX: value[2].trim(),
+                    // scaleY: value[3].trim(),
+                    translateX: value[4].trim(),
+                    translateY: value[5].trim(),
+                };
+            },
+            // Next or prev action
+            switchAction(a) {
+                let lastIndex = this.index;
+                switch (a) {
+                    case "prev":
+                        // prev action
+                        this.index += this.index <= 0 ? 0 : -1;
+                        break;
+                    case "next":
+                        // next action
+                        let srcListLength = this.listLength - 1;
+
+                        this.index +=
+                            this.index >= srcListLength ? srcListLength - this.index : 1;
+                        break;
+                    default:
+                        this.index = +a;
+                        break;
+                }
+                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);
+            },
+            // To judge thumbnail list move
+            judgeThumbnailListMove(lastIndex, index) {
+                if (lastIndex == index) return;
+
+                let translateX = 0,
+                    lastTransform = 0,
+                    step = index - lastIndex,
+                    move = step * 34,
+                    length = this.listLength,
+                    target = this.$refs["duoViewerImageThumbnailList"];
+
+                if (!target) return;
+
+                lastTransform = this.getCurrentTransform(target);
+
+                if (lastTransform) {
+                    translateX = Math.abs(+lastTransform.translateX);
+                }
+
+                this.setTransform(target, {
+                    scaleX: "1",
+                    skewY: "0",
+                    translateX: `-${translateX + move}px`,
+                    translateY: "0%",
+                    rotate: "0deg",
+                });
+            },
+            // Set element Transform
+            setTransform(obj, transformValue) {
+                let str = "";
+
+                str += `translateX(${transformValue["translateX"]}) `;
+                str += `translateY(${transformValue["translateY"]}) `;
+                transformValue["rotate"] &&
+                    (str += `rotate(${transformValue["rotate"]}) `);
+
+                this.setStyleByName(obj, "transform", str);
+            },
+
+            // FullScreen action
+            requestFullScreen() {
+                let element = this.$refs["duoViewer"],
+                    requestMethod =
+                        element.requestFullScreen ||
+                        element.webkitRequestFullScreen ||
+                        element.mozRequestFullScreen ||
+                        element.msRequestFullScreen;
+
+                if (requestMethod) {
+                    requestMethod.call(element);
+                } else if (typeof window.ActiveXObject !== "undefined") {
+                    // ie
+                    let wscript = new ActiveXObject("WScript.Shell");
+                    wscript !== null && wscript.SendKeys("{F11}");
+                }
+            },
+
+            // Keydown action
+            keydown() {
+                window.addEventListener("keydown", (e) => {
+                    e = event || window.event || arguments.callee.caller.arguments[0];
+
+                    if (e && e.keyCode == 40) {
+                        // down
+                        this.zoom("out");
+                    }
+                    if (e && e.keyCode == 37) {
+                        // left
+                        this.switchAction("prev");
+                    }
+                    if (e && e.keyCode == 39) {
+                        // right
+                        this.switchAction("next");
+                    }
+                    if (e && e.keyCode == 38) {
+                        // up
+                        this.zoom("in");
+                    }
+                    if (e && e.keyCode == 27) {
+                        // esc
+                        this.handleClose()
+                    }
+                });
+            },
+
+            // Init mouse wheel event
+            initMouseWheel() {
+                const scrollFn = (e) => {
+                    e = e || window.event;
+                    if (e.wheelDelta) {
+                        // for IE/Google
+                        if (e.wheelDelta > 0) {
+                            this.zoom("out");
+                        }
+                        if (e.wheelDelta < 0) {
+                            this.zoom("in");
+                        }
+                    } else if (e.detail) {
+                        // for Firefox
+                        if (e.detail > 0) {
+                            this.zoom("out");
+                        }
+                        if (e.detail < 0) {
+                            this.zoom("in");
+                        }
+                    }
+                };
+
+                document.addEventListener &&
+                    document.addEventListener("DOMMouseScroll", scrollFn, false);
+                window.onmousewheel = document.onmousewheel = scrollFn;
+            },
+
+            // Agent
+            clickAgent(e) {
+                switch (e.target.getAttribute("data-viewer-action")) {
+                    case "zoom-in":
+                        this.zoom("in");
+                        break;
+                    case "zoom-out":
+                        this.zoom("out");
+                        break;
+                    case "one-to-one":
+                        this.resetZoom();
+                        break;
+                    case "prev":
+                        this.switchAction("prev");
+                        break;
+                    case "play":
+                        this.requestFullScreen();
+                        break;
+                    case "next":
+                        this.switchAction("next");
+                        break;
+                    case "reset":
+                        this.resetAll();
+                        break;
+                    case "select":
+                        this.switchAction(e.target.getAttribute("data-viewer-action-index"));
+                        break;
+                    case "rotate-left":
+                        this.rotate("left");
+                        break;
+                    case "rotate-right":
+                        this.rotate("right");
+                        break;
+                }
+            },
+            // On close
+            handleClose() {
+                this.imgList = null
+                this.isCreatePoster = false
+                this.$emit("update:show", false);
+            },
+        },
+    };
+</script>
+
+<style lang="less" scoped>
+    @import "./style/css/index.css";
+</style>