公共图片查看页

photoView/README.md

@@ -0,0 +1,7 @@
+#   该页面为照片、视频、全景图查看页
+
+##  照片： type = image && name != '全景照片'，key值传入照片key
+
+##  全景图： type=image && name == '全景照片'，key值传入图片key值
+
+##  视频： type=video，key值传入视频key值 //视频暂无（后台）

photoView/css/reset.css

@@ -0,0 +1,77 @@
+html,
+body,
+div,
+span,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+abbr,
+address,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+samp,
+small,
+strong,
+sub,
+sup,
+var,
+b,
+i,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    font-size: 100%;
+    vertical-align: baseline;
+    background: transparent;
+}

photoView/js/CSS3DStereoRenderer.js

@@ -0,0 +1,324 @@
+/**
+ * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
+ * @author mrdoob / http://mrdoob.com/
+ * @author yomotsu / https://yomotsu.net/
+ */
+
+THREE.CSS3DObject = function(element) {
+
+    THREE.Object3D.call(this);
+
+    this.element = element;
+    this.element.style.position = 'absolute';
+
+    this.addEventListener('removed', function() {
+
+        if (this.element.parentNode !== null) {
+
+            this.element.parentNode.removeChild(this.element);
+
+        }
+
+    });
+
+};
+
+THREE.CSS3DObject.prototype = Object.create(THREE.Object3D.prototype);
+THREE.CSS3DObject.prototype.constructor = THREE.CSS3DObject;
+
+THREE.CSS3DSprite = function(element) {
+
+    THREE.CSS3DObject.call(this, element);
+
+};
+
+THREE.CSS3DSprite.prototype = Object.create(THREE.CSS3DObject.prototype);
+THREE.CSS3DSprite.prototype.constructor = THREE.CSS3DSprite;
+
+//
+
+THREE.CSS3DRenderer = function() {
+
+    console.log('THREE.CSS3DRenderer', THREE.REVISION);
+
+    var _width, _height;
+    var _widthHalf, _heightHalf;
+
+    var matrix = new THREE.Matrix4();
+
+    var cache = {
+        camera: { fov: 0, style: '' },
+        objects: new WeakMap()
+    };
+
+    var domElement = document.createElement('div');
+    domElement.style.overflow = 'hidden';
+
+    this.domElement = domElement;
+
+    var cameraElement = document.createElement('div');
+
+    cameraElement.style.WebkitTransformStyle = 'preserve-3d';
+    cameraElement.style.transformStyle = 'preserve-3d';
+
+    domElement.appendChild(cameraElement);
+
+    var isIE = /Trident/i.test(navigator.userAgent);
+
+    this.getSize = function() {
+
+        return {
+            width: _width,
+            height: _height
+        };
+
+    };
+
+    this.setSize = function(width, height) {
+
+        _width = width;
+        _height = height;
+        _widthHalf = _width / 2;
+        _heightHalf = _height / 2;
+
+        domElement.style.width = width + 'px';
+        domElement.style.height = height + 'px';
+
+        cameraElement.style.width = width + 'px';
+        cameraElement.style.height = height + 'px';
+
+    };
+
+    function epsilon(value) {
+
+        return Math.abs(value) < 1e-10 ? 0 : value;
+
+    }
+
+    function getCameraCSSMatrix(matrix) {
+
+        var elements = matrix.elements;
+
+        return 'matrix3d(' +
+            epsilon(elements[0]) + ',' +
+            epsilon(-elements[1]) + ',' +
+            epsilon(elements[2]) + ',' +
+            epsilon(elements[3]) + ',' +
+            epsilon(elements[4]) + ',' +
+            epsilon(-elements[5]) + ',' +
+            epsilon(elements[6]) + ',' +
+            epsilon(elements[7]) + ',' +
+            epsilon(elements[8]) + ',' +
+            epsilon(-elements[9]) + ',' +
+            epsilon(elements[10]) + ',' +
+            epsilon(elements[11]) + ',' +
+            epsilon(elements[12]) + ',' +
+            epsilon(-elements[13]) + ',' +
+            epsilon(elements[14]) + ',' +
+            epsilon(elements[15]) +
+            ')';
+
+    }
+
+    function getObjectCSSMatrix(matrix, cameraCSSMatrix) {
+
+        var elements = matrix.elements;
+        var matrix3d = 'matrix3d(' +
+            epsilon(elements[0]) + ',' +
+            epsilon(elements[1]) + ',' +
+            epsilon(elements[2]) + ',' +
+            epsilon(elements[3]) + ',' +
+            epsilon(-elements[4]) + ',' +
+            epsilon(-elements[5]) + ',' +
+            epsilon(-elements[6]) + ',' +
+            epsilon(-elements[7]) + ',' +
+            epsilon(elements[8]) + ',' +
+            epsilon(elements[9]) + ',' +
+            epsilon(elements[10]) + ',' +
+            epsilon(elements[11]) + ',' +
+            epsilon(elements[12]) + ',' +
+            epsilon(elements[13]) + ',' +
+            epsilon(elements[14]) + ',' +
+            epsilon(elements[15]) +
+            ')';
+
+        if (isIE) {
+
+            return 'translate(-50%,-50%)' +
+                'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)' +
+                cameraCSSMatrix +
+                matrix3d;
+
+        }
+
+        return 'translate(-50%,-50%)' + matrix3d;
+
+    }
+
+    function renderObject(object, camera, cameraCSSMatrix) {
+
+        if (object instanceof THREE.CSS3DObject) {
+
+            var style;
+
+            if (object instanceof THREE.CSS3DSprite) {
+
+                // http://swiftcoder.wordpress.com/2008/11/25/constructing-a-billboard-matrix/
+
+                matrix.copy(camera.matrixWorldInverse);
+                matrix.transpose();
+                matrix.copyPosition(object.matrixWorld);
+                matrix.scale(object.scale);
+
+                matrix.elements[3] = 0;
+                matrix.elements[7] = 0;
+                matrix.elements[11] = 0;
+                matrix.elements[15] = 1;
+
+                style = getObjectCSSMatrix(matrix, cameraCSSMatrix);
+
+            } else {
+
+                style = getObjectCSSMatrix(object.matrixWorld, cameraCSSMatrix);
+
+            }
+
+            var element = object.element;
+            var cachedStyle = cache.objects.get(object);
+
+            if (cachedStyle === undefined || cachedStyle !== style) {
+
+                element.style.WebkitTransform = style;
+                element.style.transform = style;
+
+                var objectData = { style: style };
+
+                if (isIE) {
+
+                    objectData.distanceToCameraSquared = getDistanceToSquared(camera, object);
+
+                }
+
+                cache.objects.set(object, objectData);
+
+            }
+
+            if (element.parentNode !== cameraElement) {
+
+                cameraElement.appendChild(element);
+
+            }
+
+        }
+
+        for (var i = 0, l = object.children.length; i < l; i++) {
+
+            renderObject(object.children[i], camera, cameraCSSMatrix);
+
+        }
+
+    }
+
+    var getDistanceToSquared = function() {
+
+        var a = new THREE.Vector3();
+        var b = new THREE.Vector3();
+
+        return function(object1, object2) {
+
+            a.setFromMatrixPosition(object1.matrixWorld);
+            b.setFromMatrixPosition(object2.matrixWorld);
+
+            return a.distanceToSquared(b);
+
+        };
+
+    }();
+
+    function filterAndFlatten(scene) {
+
+        var result = [];
+
+        scene.traverse(function(object) {
+
+            if (object instanceof THREE.CSS3DObject) result.push(object);
+
+        });
+
+        return result;
+
+    }
+
+    function zOrder(scene) {
+
+        var sorted = filterAndFlatten(scene).sort(function(a, b) {
+
+            var distanceA = cache.objects.get(a).distanceToCameraSquared;
+            var distanceB = cache.objects.get(b).distanceToCameraSquared;
+
+            return distanceA - distanceB;
+
+        });
+
+        var zMax = sorted.length;
+
+        for (var i = 0, l = sorted.length; i < l; i++) {
+
+            sorted[i].element.style.zIndex = zMax - i;
+
+        }
+
+    }
+
+    this.render = function(scene, camera) {
+
+        var fov = camera.projectionMatrix.elements[5] * _heightHalf;
+
+        if (cache.camera.fov !== fov) {
+
+            if (camera.isPerspectiveCamera) {
+
+                domElement.style.WebkitPerspective = fov + 'px';
+                domElement.style.perspective = fov + 'px';
+
+            }
+
+            cache.camera.fov = fov;
+
+        }
+
+        scene.updateMatrixWorld();
+
+        if (camera.parent === null) camera.updateMatrixWorld();
+
+        var cameraCSSMatrix = camera.isOrthographicCamera ?
+            'scale(' + fov + ')' + getCameraCSSMatrix(camera.matrixWorldInverse) :
+            'translateZ(' + fov + 'px)' + getCameraCSSMatrix(camera.matrixWorldInverse);
+
+        var style = cameraCSSMatrix +
+            'translate(' + _widthHalf + 'px,' + _heightHalf + 'px)';
+
+        if (cache.camera.style !== style && !isIE) {
+
+            cameraElement.style.WebkitTransform = style;
+            cameraElement.style.transform = style;
+
+            cache.camera.style = style;
+
+        }
+
+        renderObject(scene, camera, cameraCSSMatrix);
+
+        if (isIE) {
+
+            // IE10 and 11 does not support 'preserve-3d'.
+            // Thus, z-order in 3D will not work.
+            // We have to calc z-order manually and set CSS z-index for IE.
+            // FYI: z-index can't handle object intersection
+            zOrder(scene);
+
+        }
+
+    };
+
+};

photoView/photo-View.html

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Photo Sphere Viewer</title>
+    <meta name="viewport" content="initial-scale=1.0" />
+    <link rel="stylesheet" href="./css/viewer.min.css">
+    <link rel="stylesheet" href="./css/reset.css">
+    <script src="./js/three.min.js"></script>
+    <script src="./js/viewer.min.js"></script>
+    <script src="./js/photo-sphere-viewer.min.js"></script>
+    <style>
+        html,
+        body {
+            margin: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+        
+        #container {
+            width: 100%;
+            height: 100%;
+        }
+        
+        #container video {
+            width: 100%;
+            height: 100%;
+        }
+        
+        #container .div {
+            height: 100%;
+            width: 100%;
+        }
+        
+        #container #images {
+            height: 100%;
+            width: 100%;
+            background-color: rgba(0, 0, 0, .5)
+        }
+        
+        #images img {
+            width: 200px;
+            height: 200px;
+            text-align: center;
+            margin-left: auto;
+            display: block;
+            margin-right: auto;
+            margin-top: 300px;
+        }
+        
+        .spinner {
+            margin: 100px auto;
+            width: 50px;
+            height: 60px;
+            text-align: center;
+            font-size: 10px;
+        }
+        
+        .spinner>div {
+            background-color: #67CF22;
+            height: 100%;
+            width: 6px;
+            display: inline-block;
+            -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
+            animation: stretchdelay 1.2s infinite ease-in-out;
+        }
+        
+        .spinner .rect2 {
+            -webkit-animation-delay: -1.1s;
+            animation-delay: -1.1s;
+        }
+        
+        .spinner .rect3 {
+            -webkit-animation-delay: -1.0s;
+            animation-delay: -1.0s;
+        }
+        
+        .spinner .rect4 {
+            -webkit-animation-delay: -0.9s;
+            animation-delay: -0.9s;
+        }
+        
+        .spinner .rect5 {
+            -webkit-animation-delay: -0.8s;
+            animation-delay: -0.8s;
+        }
+        
+        @-webkit-keyframes stretchdelay {
+            0%,
+            40%,
+            100% {
+                -webkit-transform: scaleY(0.4)
+            }
+            20% {
+                -webkit-transform: scaleY(1.0)
+            }
+        }
+        
+        @keyframes stretchdelay {
+            0%,
+            40%,
+            100% {
+                transform: scaleY(0.4);
+                -webkit-transform: scaleY(0.4);
+            }
+            20% {
+                transform: scaleY(1.0);
+                -webkit-transform: scaleY(1.0);
+            }
+        }
+        
+        .viewer-canvas,
+        html {
+            background-color: rgba(0, 0, 0, .5)
+        }
+        
+        #loading {
+            position: absolute;
+            top: 30%;
+            left: 45%;
+            z-index: 10;
+        }
+        
+        #container>div {
+            z-index: 40;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="container">
+    </div>
+    <div id="loading"></div>
+    <script>
+        var falg = false,
+            dataView
+
+        function receiveMessageFromIndex(event) {
+            console.log('receiveMessageFromIndex', event.data)
+            dataView = event.data
+            falg = true
+            this.postView()
+        }
+
+        //监听message事件
+        window.addEventListener("message", receiveMessageFromIndex, false);
+
+        if (!falg) {
+            var div = document.getElementById('container'), //获取承接容器
+                key = getQueryString('key'), //获取传来的图片或视频key值
+                type = getQueryString('type'), //获取图片的类型 image正常图片 image/name全景图 video视频
+                name = getQueryString('name'); //获得到的名字
+            div.innerHTML = '';
+            if (!!type) {
+                if (type == 'panorama') {
+                    panorama()
+                } else if (type == 'video') {
+                    video()
+                } else if (type.indexOf('image') != '-1') {
+                    preview()
+                }
+            }
+        } else {
+            this.postView()
+        }
+
+        function postView() {
+            var dom = ``
+            for (var j = 0; j < dataView.length; j++) {
+                dom += `<li><img src="img/image-service/common/image_get?systemId=dataPlatform&key=` + dataView[j].key + `" alt=` + dataView[j].name + `></li>`
+            }
+            var text = `
+            <div class="div">
+            <ul id="images">
+                ` + dom + `
+            </ul>
+            </div>`
+            div.innerHTML = text
+            console.log(text, "text")
+            var viewer = new Viewer(document.getElementById('images'), {
+                backdrop: false
+            });
+            viewer.show()
+        }
+
+
+        function preview() {
+            var con = `
+            <div class="div">
+            <ul id="images">
+                <li><img src="img/image-service/common/image_get?systemId=dataPlatform&key=` + key + `" alt="` + name + `"></li>
+            </ul>
+            </div>`
+            div.innerHTML = con
+
+            // View a list of images
+            if (!!key) {
+                var viewer = new Viewer(document.getElementById('images'), {
+                    backdrop: false
+                });
+                viewer.show()
+            }
+        }
+
+        function video() {
+            var videoCainter = document.createElement('video');
+            videoCainter.setAttribute('src', 'img/ image-service/common/fileget?systemId=dataPlatform&key=' + key);
+            videoCainter.setAttribute('controls', 'controls');
+            videoCainter.innerText = '您的浏览器不支持 video 标签。'
+            div.appendChild(videoCainter)
+        }
+
+        //获取url传参
+        function getQueryString(name) {
+            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
+            var r = window.location.search.substr(1).match(reg);
+            if (r != null) {
+                return unescape(r[2]);
+            }
+            return null;
+        }
+
+        function panorama() {
+            //加上width避免图片过大导致请求时间长而认为请求失败
+            var loading = `<div class="spinner">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>`;
+            document.getElementById('loading').innerHTML = loading
+            var url = 'img/image-service/common/image_get?systemId=dataPlatform&key=' + key + '&width=5000';
+            var PSV = new PhotoSphereViewer({
+                panorama: url,
+                // panorama: './image/IMG_0518.JPG',
+                container: div,
+                time_anim: 3000,
+                navbar: true,
+                navbar_style: {
+                    backgroundColor: 'rgba(58, 67, 77, 0.7)'
+                },
+            });
+        }
+    </script>
+</body>
+
+</html>

photoView/test.html

@@ -0,0 +1,42 @@
+<HTML>
+
+<HEAD>
+    <TITLE>WMI Scripting HTML</TITLE>
+    <META http-equiv=Content-Type content="text/html; charset=gb2312">
+    <script>
+        function validBrowser() {
+            var u_agent = navigator.userAgent;
+            var browser_name = 'Failed to identify the browser';
+            if (u_agent.indexOf('Firefox') > -1) {
+                browser_name = 'Firefox';
+            } else if (u_agent.indexOf('Chrome') > -1) {
+                browser_name = 'Chrome';
+            } else if (u_agent.indexOf('Trident') > -1 && u_agent.indexOf('rv:11') > -1) {
+                browser_name = 'IE11';
+            } else if (u_agent.indexOf('MSIE') > -1 && u_agent.indexOf('Trident') > -1) {
+                browser_name = 'IE(8-10)';
+            } else if (u_agent.indexOf('MSIE') > -1) {
+                browser_name = 'IE(6-7)';
+            } else if (u_agent.indexOf('Opera') > -1) {
+                browser_name = 'Opera';
+            } else {
+                browser_name += ',info:' + u_agent;
+            }
+            document.write('browser_name:' + browser_name + '<br>');
+            document.write('u_agent:' + u_agent + '<br>');
+        }
+        var a = 1;
+        if (!(b in window)) {
+            var b = 2;
+            a += 1
+        } else {
+            a += 2
+        }
+        console.log(a)
+        console.log(b)
+    </script>
+
+    <body onload="validBrowser()">
+    </body>
+
+</html>