photo sphere viewer是一个js库，用来将全景图片生成360度的全景图像，但是其要求传入的是个路径。如何使用数据代替路径生成图像。

我采用的方法是用img标签生成图像，然后调用img.src来替换path

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title>Photo Sphere Viewer</title>

        <meta name="viewport" content="initial-scale=1.0" />

        <script src="{{ url_for('static', filename='three.min.js')}}"></script>

        <script src="{{ url_for('static', filename='photo-sphere-viewer.min.js')}}"></script>

        <style>

            html, body {

                margin: 0;

                width: 100%;

                height: 100%;

                overflow: hidden;

            }

            #container {

                width: 100%;

                height: 100%;

            }

        </style>

    </head>

    <body>

        <div id="container"></div>

        <img id="image" src="data:image/jpeg;base64,{{ image }}" alt="test">

        <script>

            var div = document.getElementById('container');

            var img = document.getElementById('image');

            var PSV = new PhotoSphereViewer({

                    panorama: img.src,

                    container: div,

                    time_anim: 3000,

                    navbar: true,

                    navbar_style: {

                        backgroundColor: 'rgba(58, 67, 77, 0.7)'

                    },

                });

        </script>

    </body>

</html>

传入的image是经过base64压缩过的图像的数据

photo sphere viewer使用图像数据替代路径来生成全景图的更多相关文章

  1. Photo Sphere Viewer 全景图

    Photo Sphere Viewer  一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的 该js插件可以360度旋转查看全景图,也可以上 ...

  2. postgresql pgsql最新版安装指南及数据存储路径更改及主从配置

    postgresql pgsql最新版安装指南及数据存储路径更改及主从配置 安装指南 首先在apt的list添加你当前系统版本对应的apt列表 目前官网有16.04,14.04,12.04 分别对应下 ...

  3. [转载]ubuntu下如何更改mysql数据存放路径

    http://www.gaojinbo.com/ubuntu%E4%B8%8B%E5%A6%82%E4%BD%95%E6%9B%B4%E6%94%B9mysql%E6%95%B0%E6%8D%AE%E ...

  4. VS2017编译GDAL(64bit)+解决C#读取Shp数据中文路径的问题

    编译GDAL过程比较繁琐,查阅了网上相关资料,同时通过实践,完成GDAL的编译,同时解决了SHP数据中文路径及中文字段乱码的问题,本文以“gdal-2.3.2”版本为例阐述整个编译过程. 一.编译准备 ...

  5. mysql利用yum安装指定数据存放路径

    测试环境: Centos6.5.MySQL5.6.28 yum安装具有速度快,便捷关键是不用编译,编译时间太久了! 01.下载mysql https://mirrors.tuna.tsinghua.e ...

  6. 使用 Python 设置数据的路径

    使用 Python 设置数据的路径 编程语言(如 Python)将反斜线 (\) 用作转义字符.例如,\n 表示换行符,\t 表示制表符.指定路径时,可使用正斜线 (/) 代替反斜线.使用两条反斜线( ...

  7. Oracle 11g R2(11.2.0.4) RAC 数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件

    Oracle 11g R2(11.2.0.1) RAC  数据文件路径错误解决--ORA-01157 ORA-01110: 数据文件 oracle 11g R2(11.2.0.4) rac--scan ...

  8. mysql修改数据存储路径报错处理

    Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock'解决?: >>> vim ...

  9. MiniWord .NET Word模板引擎，藉由Word模板和数据简单、快速生成文件。

    Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 介绍 MiniWord .NET Word模板引擎,藉由Word模板和数据简单.快速生 ...

随机推荐

  1. 详解SHOW PROCESSLIST显示哪些线程正在运行列出的状态

    SHOW PROCESSLIST显示哪些线程正在运行.您也可以使用mysqladmin processlist语句得到此信息.如果您有SUPER权限,您可以看到所有线程.否则,您只能看到您自己的线程( ...

  2. AOP相关

    静态代理.动态代理与AOP: 简单易懂:http://blog.csdn.net/hejingyuan6/article/details/36203505 补充:http://layznet.itey ...

  3. 获取span中的值

    js-code:var baseinfoallfeesum=$("#allFeeSum").html(); $("#baseInfoAllFeeSum").va ...

  4. [ Python - 8 ] 简单demo练习

    练习1: 利用os模块编写一个能实现dir -l输出的程序(注意:dir /l是windows下命令) #!_*_coding:utf-8_*_ # Author: hkey import os, t ...

  5. 使用 .NET Core 的日志记录

    如何使用 Microsoft.Extensions.Logging   public static void Main(string[] args = null) {  ILoggerFactory ...

  6. DELPHI用const来提高应用程序在多核多线程下的性能

    来自:http://bbs.csdn.net/topics/330048800 --------------------------------------------------------- 我们 ...

  7. Vmware esxi开启snmp服务

    https://jingyan.baidu.com/article/9f7e7ec055c4c86f28155435.html http://pubs.vmware.com/vsphere-50/in ...

  8. MYSQL的内外连接

    1.内联接(典型的联接运算,使用像 =  或 <> 之类的比较运算符).包括相等联接和自然联接.     内联接使用比较运算符根据每个表共有的列的值匹配两个表中的行.例如,检索 stude ...

  9. head first (一)：策略模式

    head first 看了一遍,被面试时问我工厂模式,我发现我还是不记得,所以还是认认真真的看一遍吧,上一遍看的太快了,什么都没有记住.这一遍我会写下一些东西帮助自己记忆和理解,例子我也会用C#自己写 ...

  10. centos6.5 403 Forbidden 设置了777还是不行

    Forbidden You don't have permission to access /liuyanben/install on this server. Apache/2.2.15 (Cent ...