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. Swift 闭包(六)

    http://blog.csdn.net/huangchentao/article/details/32714185 闭包 Closures 1.闭包表达式 闭包表达式是一种利用简单语法构建内联包的方 ...

  2. 电脑IP总是变的问题

    如题,如何解决该问题? 右键---->个性化---->更改桌面图标---->添加网络图标 右键网络图标----->属性---->更改适配器设置---->右键属性,找 ...

  3. win32 读取文本文件，并进行字符串分割和存储

    //分割字符      char *p;//p存放临时行指针 q存放临时每一行的列指针      char *hang[100]={0};//存储第一行      char *lie[300]={0} ...

  4. Java的Hashtable类（转）

    文章来源:http://blog.csdn.net/zhna123_2011/article/details/6741479 ps:直接copy 哈希表是一种重要的存储方式,也是一种常见的检索方法.其 ...

  5. 51nod 1137 矩阵乘法【矩阵】

    1137 矩阵乘法 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难度:基础题  收藏  关注 给出2个N * N的矩阵M1和M2,输出2个矩阵相乘后的结果.   Input 第1行 ...

  6. D - Interesting Calculator 【数值型BFS+优先队列】

    There is an interesting calculator. It has 3 rows of buttons. Row 1: button 0, 1, 2, 3, ..., 9. Pres ...

  7. scrapy生成csv文件空行、csv文件打开乱码（解决方案）

    一.scrapy生成csv文件会有多余的空行 当使用scrapy crawl testspider -o test.csv后,生成的默认csv文件每一行之间是有空行的,解决的方法是修改scrapy的源 ...

  8. hdu2825（AC 自动机）

    hdu2825 题意 给出一些字符串,要求构造一个长度为 \(n\) 的字符串至少包括其中的 \(k\) 个,问有多少种字符串满足条件. 分析 AC自动机 构造状态转移,然后 状态压缩DP 即可. \ ...

  9. P1162 填涂颜色 洛谷

    题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭合圈内的所有空间都填写成2.例如:6X6的方阵(n=6),涂色前和涂色后的方阵如下: 0 ...

  10. priority_queue的运算符重载问题

    对于需要比较的函数或STL(最常见的为sort,priority_queue) 要对自创的结构进行运算符重载(sort可以写cmp,一样的效果) 1.只能对小于号重载 cmp函数与其起到相同的作用 2 ...